<!--直播页面互动留言-->
<template>
	<div class="liveMsg" :class="msgHeight">
		<div v-show="shoppingIsShowList" :class="[shoppingList]" ref="shoppingList" >
			<div class="shopping-list-header">
				<div @click="shoppingClose"></div>
			</div>
			<ul class="shopping-list-ul">
				<li v-for="v of  shoppingDataArray" @click="clickShoppingLink(v.id,v.goodsLink)" :key="v.id">
					<div class="shopping-list-li-left">
						<img :src="v.goodsImg" />
					</div>
					<div class="shopping-list-li-right">
						<div class="shopping-p">{{v.goodsName}}</div>
						<p class="shopping-price"><span class="shopping-priceNum">{{v.marketPrice}}</span></p>
						<div class="shopping-tagA"></div>
					</div>
				</li>
			</ul>
		</div>
		<transition name="showRect" @before-enter="handleBeforeEnter" @enter="handleEnter" @after-enter="handleAfterEnter" @before-leave="handleBeforeLeave" @leave="handleLeave" @after-leave="handleAfterLeave" :css="false">
			<div v-show="marqueeShow" ref="marquee" class="marquee-box" :style="note">
				<div class="logo"></div>
				<p>{{marquee[0]}}</p>
			</div>
		</transition>
		<!--进入直播间提示-->
		<transition name="showRect" @before-enter="TipUnBeforeEnter" @enter="TipUnEnter" @after-enter="TipUnAfterEnter" @before-leave="TipUnBeforeLeave" @leave="TipUnLeave" @after-leave="TipUnAfterLeave" :css="false">
			<div v-show="marqueeTipUnShow" class="marquee-tip" :class="[marqueeTipClass]">
			  <p><span>{{marqueeTipUnArray[0]}}</span>{{comeTip}}</p>
		    </div>
		</transition>
		<div class="comment" ref="refComment" :style=" 'height:'+ msgHeight">
			<ul class="sysInfo-ul">
				<li>
					<img :src="sysInfo.icon">
					<div class="comment-list">
						<p class="comment-livep">
							{{sysInfo.name}}
							<span id="comment-imgicon"></span>
						</p>
						<p id="live-red" v-html="liveMsgData.topWord"></p>
					</div>
				</li>
			</ul>
			<ul class="msgContentClass"  ref="msgContent" @click="redPacketHistoryClick($event)">
				<!-- <li class="msg-li-li">
					<div class="li-msg-left">
						<img onerror="imgError()" src="/static/img/gd_mr.9caf8ca.png">
					</div>
					<div class="li-msg-right">
						<p class="nickBox"><span class="nikeNameRuan">游客1234</span><span class="liveTimeRuan">09-24  17:58</span></p>
						<div class="connect-boxText">精彩视频精彩视频精彩视频精彩视频精彩视频精彩视频精彩视频精彩视频精彩视频精彩视频精彩视频精彩视频精彩视频</div>
						<div class="reply-msg-box">
							<p class="reply-nick-box"><span class="reply-name">游客1234</span><span class="reply-time">09-24  17:58</span></p>
							<div class="reply-text">
								精彩视频精彩视频精彩视频精彩视频精彩视频精彩视频精彩视频精彩视频精
							</div>
						</div>
					</div>
				</li> -->
			</ul>
		</div>
		<!--红包组件-->  <!-- redEnterType红包入口-->  <!-- redPacketData弹出红包数据-->    <!--list 红包历史列表-->
	    <RedPacket  :redEnterType='enterType'  :key="renderCom"  :redPacketData = 'hongbaoData' :list= 'redListParent'   @sendParentCloseFromRedPacket="childCallBackFromRedPacket"  :sid='sceneId'    v-if = 'isStartRedPacket' />
		<!--工商银行提示页-->
		<!--<div class="gsyh-tip-box" v-if = "this.$channel=='gsyh'">
			<p>评论功能暂未开放,敬请期待</p>
		</div>-->
		<footer v-show="!answerWrapShow" v-if='footerChannelShow'>
			<div class="YK-cover" v-if="YKCoverIs" @click.stop="clickYKcover"></div>
			<div class="comment-box">
				<!--禁言box-->
				<div class="shield-box" v-if="shieldBox"></div>
				<!--gdkj禁言box-->
				<!--<div class="shield-box-gdkj" v-if="shieldBoxGDKJ"></div>-->
				<div class="input-big-box">
					<input v-model="liveMessage" type="text" ref="footerInputRu" @click="footerInput" @blur="blurRu" v-on:input="inputchange" :placeholder="footerPlaceholder">
					<div :class="[btnSend]" @click="sendMsg"></div>
				</div>
				<div class="num-box" @click="send_z" id="zanTeXiao" ref="zanTeXiao">
             <i aria-hidden="true" class="iconfont icondianzan2 icon"></i>
             <img src="../assets/images/one.png" class="addone" :class="oneShow ? 'add_up' : 'one_no'" @animationend="oneShow = false"/>
				</div>
			<!--	<div class="footer-zan-num">{{footerNum | filterFooterNum(1)}}</div>-->
			</div>
		</footer>
		<!-- 悬浮窗 -->
		<ul class="liveMsg-suspension" v-if="isOriginHei" :class="yqylShow ? 'hasInvited': ''">
			<li v-if="inviteShow" class="statusY"   @click="openInvite()" >邀</li>
			<li v-for="(item,index) in rightList" :class="'status'+index"   @click="openAnswer(item.id,item.qaType)" :key="index">{{ qaTypetoBetext[item.qaType] }}</li>
			<li class="red-gif"><img src="../assets/images/redPacket/red-gif.gif" @click="clickRedGif" v-if='isRedGif'  /></li>
		</ul>
		<!--<div class="invited" @click="handelInvited" v-if="yqylShow">
			<div class="box">
				邀请有礼
			</div>
			<img class="pic" src="../assets/images/present.png">
		</div>-->
        <div class="hd-message-box">
			<div class="invited invited-top" @click="handelInvited" v-if="yqylShow">
				<div class="box">
					邀请有礼
				</div>
				<img class="pic" src="../assets/images/present.png">
			</div>
			<!--一键下单-->
			<div class="invited" @click="animateShoppingClick" v-show="shoppingIsShow">
				<div class="box">
					{{linkTitleText}}
				</div>
				<img class="pic" src="../assets/images/present.png">
			</div>
		</div>
		<!-- 答题模块 -->
		<div class="answer-wrap" v-if="answerWrapShow">
			<div class="close-answer-wrap" @click="closeAnswer">
				<Iconfont iconClass="cha1" />
			</div>
			<!-- 答题中 -->
			<div class="answer-wrap-ing" v-if="answerWrapState==='0'">
				<div class="a-w-i-question">
					<cube-scroll :options="scrollOptions">
						<div class="a-w-i-head">{{answerWrapTitle}}</div>
						<div class="center-ans">
							<div v-if="phoneIsRequired" class="phoneBlock">
								<div>手机号码：</div>
								<input class="binding-form-mobile" type="number" maxlength="16" ref="mobileInput" @click="clickFocus" v-model="mobileD" placeholder="填写手机号，参与互动抽奖">
							</div>
							<div class="question-item" v-for="(q,key) in answerIngArr" :key="key" ref="answerListRef">
								<div>
									<span class="question-id">{{ key | addOne}}/{{answerIngArr.length}}</span> {{q.qContent}}
									<span v-if="q.qType==='2' && q.qOptionNum != 0 && (rightListClickType===3 || rightListClickType ===4)">（多选，最多选{{q.qOptionNum}}项）</span>
									<span v-else>{{ typeTextObj[q.qType]}}</span>
								</div>
								<ul v-if="q.qType==='1'">
									<li v-for="(item,index) in q.answerList" :key="index">
										<input type="radio" :id="'choice'+index+'_'+key" :value="item.answerId" v-model="formDataD[q.questionId]" :checked='item.isChecked'>
										<label :for="'choice'+index+'_'+key">{{item.seqCode }}.{{item.qAnswer}} {{item.isChecked}}
                  <Iconfont  v-if="item.answerId === formDataD[q.questionId]" iconClass="duigouzhong normal-color"/>
                  <Iconfont  v-else iconClass="duigou-weigouxuan color"/> </label>

									</li>
								</ul>
								<ul v-if="q.qType==='2'">
									<li v-for="(item,index) in q.answerList" :key="index">
										<span :class="{'isChecked':checkedArrD[key].Listids.indexOf(index)>=0  }" @click="checkLabel(index,q.questionId,item.answerId,q.qType,key,q.qOptionNum)">{{item.seqCode}}.{{item.qAnswer}}
                    <Iconfont  v-show="checkedArrD[key].Listids.indexOf(index)>=0" iconClass="duigouzhong normal-color"/>
                    <Iconfont v-show="checkedArrD[key].Listids.indexOf(index)<0"  iconClass="duigou-weigouxuan color"/>
                  </span>
									</li>
								</ul>
								<div v-if="q.qType==='3'">
									<input class="filling-wrap" type="text" @blur="blurRuA" v-model="formDataD[q.questionId]">
								</div>
							</div>
							<div class="answer-error-wrap">
								<div v-show="errorShowD" class="answer-error">
									<Iconfont iconClass="gantanhao1" /> {{answerErrorText}}
								</div>
							</div>
							<button class="answer-button" @click="submitAnswer" :disabled="submitDisable">提交</button>

						</div>
					</cube-scroll>
				</div>
			</div>

			<!-- 答案多题的时候-->
			<div class="result" v-if="answerWrapState==='1'">
				<cube-scroll :options="scrollOptions">
					<ul class="result-item">
						<li v-for="(item,index) in answerResultArr" :key="index">
							<div class="result-item-head">{{index | addOne}}/{{answerResultArr.length}} {{item.qContent}}</div>
							<div class="result-item-text">
								<div class="result-item-text-left">正确答案：</div>
								<div class="result-item-text-right">
									<div v-for="(itemAnswer,i) in item.rightAnswerList" :key="i">
										<div v-if="item.qType==='3'">{{itemAnswer.qAnswer}}</div>
										<div v-else>
											<span>{{itemAnswer.seqCode}}</span>
											<span>{{itemAnswer.qAnswer}}</span>
										</div>
									</div>
								</div>
							</div>
						</li>
					</ul>
				</cube-scroll>
			</div>

			<!-- 答案一题的时候 -->
			<div class="result" v-if="answerWrapState==='2'">
				<cube-scroll :options="scrollOptions">
					<div class="prompt" v-for="(item,index) in answerResultArr" :key="index">
						<Iconfont :iconClass="resultTypeD ? 'duigou1': 'cuowu'" />
						<p v-if="resultTypeD">恭喜你，答对了 </p>
						<div v-else>
							<div class="prompt-error">对不起，答错了</div>
							<div class="oneAnswer">
								<p>
									正确答案：
								</p>
								<p v-for="(itemAnswer,i) in item.rightAnswerList" :key="i">{{itemAnswer.seqCode}} {{ itemAnswer.qAnswer }}</p>
							</div>
						</div>
					</div>
				</cube-scroll>
			</div>

			<!-- 投票结果-->
			<div class="result vote" v-if="answerWrapState==='4'">
				<cube-scroll :options="scrollOptions">
					<ul class="result-item">
						<li v-for="(item,index) in voteArr" :key="index">
							<div class="result-item-head">{{index | addOne}}/{{voteArr.length}}. {{item.qContent}}</div>
							<div class="result-item-text">
								<div class="voteItem" v-for="(q,key) in item.rightAnswerList" :key="key">
									<div>{{q.qAnswer}}</div>
									<div class="voteItem-p-wrap">
										<div class="progress">
											<div class="bar" :style="'width:'+ q.votePercent "></div>
										</div>
										<div>{{ q.votePercent}}</div>
									</div>
								</div>
							</div>
						</li>
					</ul>
				</cube-scroll>
			</div>
    </div>
  </div>
</template>
<script>
	import webim from "../util/imSdk";
	import baseIm from "../util/imBase";
	import fun from "../util/function";
	import RedPacket from '@/components/redPacketComponents/redPacket';
  import config from "../config"
	require("jr-qrcode");
    import socket from "../util/Socket";

	function trim(s) {
		return s.replace(/(^\s*)|(\s*$)/g, "");
	}
	let ua = navigator.userAgent.toLowerCase();
	let isAndroid = ua.indexOf('Android') > -1 || ua.indexOf('Adr') > -1;

	import { removeByValue } from "../util/util.js";
	export default {
		components: {
			RedPacket,
		},
		data() {
			return {
				comeTip:'来到直播间',
				mrTX:require("../assets/images/pic.jpg"),  //默认头像
				showStyle: 0,
				selSess: null,
				selType: webim.SESSION_TYPE.GROUP,
				roomId: this.$route.params.roomid,
				note: {
					left: document.body.clientWidth + "px"
				},
				isInit: false,
				liveType: 1,
				note1: {
					left: document.body.clientWidth
				},
				liveMsgData: "",
				liveCommentData: [], // 评论数组
				liveMessage: "", // input 留言
				copyLiveMessage:'',//input 留言备份
				ownerid: this.$route.params.ownerid, // 主播id
				intervaltime: "", // 定时器
				websock: null,
				pinging: null,
				lastSendTime: 0,
				marquee: [],
				marqueeStr: "", // 跑马灯从长度
				marqueeTime: "", // 跑马灯时间
				marqueeShow: false, // 动画的执行与不执行
				marqueeTipUnArray:[],//进入房间数组
				marqueeTipUnShow: false, // 动画的执行与不执行
				marqueeTipClass:'',//进入房间提示class
				PMD_MarqueeTipInterval:'',//跑马灯和进入房间定时器
				isEnterMessage:false,//进入直播间提示开关  0是关闭  1是打开 默认关闭
				computeLeft:'',//计算进入房间提示滚动距离
				anchor: this.$route.params.ownerid, // 主播id
				un: "",
				nickname: "", // 昵称
				wxpic: "",
				domWidth: "", // 跑马灯 宽度
				receiveMsgQid: 5,
				receiveGroupMsgQid: 6,
				customMsgQid: 1,
				scrollOptions: {
					//滚动参数
					directionLockThreshold: 0
				},
				errorShowD: false, //答题错误提示
				answerWrapShow: false, //答题模块
				answerIngArr: [],
				submitDisable: false,
				formDataD: {}, //答题提交数据
				mobileD: '', // 手机号
				timeD: 60, // 发送验证码倒计时
				sendMsgDisabled: false, //倒计时按钮禁用
				codeInterval: null, //发送验证码定时器,
				checkedArrD: [], //多选
				answerWrapState: "0", //答题模块的 步骤
				answerResultArr: [], //答案多题的时候
				answerResultOne: [], //答案一题的时候
				answerWrapTitle: "", //答题弹框里面标题
				answerErrorText: "", //答题弹框里面错误提示文字
				iconNameAnswer: "cuowu", //icon
				resultTypeD: false, //答案是否正确
				rightList: [], //右侧悬浮列
				qaTypetoBetext: {
					//code转成文本显示出来
					"1": "答",
					"2": "邀",
					"3": "卷",
					"4": "投"
				},
				retD: {
					"1": "答题",
					"3": "问卷",
					"4": "投票"
				},
				typeTextObj: {
					//code转成文本显示出来
					"1": "（单选）",
					"2": "（多选）",
					"3": "（填空）"
				},
				rightListClickType: null, //右侧悬浮列点击的type
				phoneIsRequired: false, //手机号是否显示
				voteIsRequired: false, //投票结果是否显示
				voteArr: [], //投票结果数组
				codePickerShow: false,
				submitInfoId: "",
				stringUserAnswer: "", //客户提交前的答案 数组转字符串格式的
				hongbaoData: "", //红包数据
				countCity: "中国大陆",
				countNum: "86",
				screenHeight: window.innerHeight, // 这里是给到了一个默认值 （这个很重要），
				originHeight: window.innerHeight, //默认高度在watch里拿来做比较
				isOriginHei: true,
				shoppingIsShow: false, //一键下单按钮
				shoppingIsShowList: true, //一键下单商品列表
				id: "", //shopping 的id
				goodsLink: "", //商品外链
				zhonghangresuliYiJian: "", //中行app版本对比结果  0  是相等  -1  是小于  1 是大于
				shoppingHeight: "1000", //底部一键下单总高度
				shoppingList: "shopping-list", //底部class
				shoppingLength: "", //商品的个数
				shoppingDataArray: [], //商品数组
				TXUrl: window.sessionStorage.getItem("TXUrl"),
				send_z_flag: true,
				cardIsYao: true, //邀请卡 push 下面的列表
				btnSend: "send", //底部按钮
				isImReTry: false,
				linkTitleText: "", //一键下单名字
				YKCoverIs: null, //游客footer覆盖是否显示
				footerNum: "", //点赞数
				sceneId: "", //场次ID
				footerPlaceholder: '', //底部留言区域placeholder
				footerChannelShow: null, //底部显示根据机构号显示
				channelArr: [config.ZHANGHANG_01, config.ZGYH, config.ZGYH_PX],
				yqylShow: false, //邀请有礼中行的特殊dom
				pageId:' ',//分页记录的锁定的id
				fenYePage:1,//分页页数  从1开始
				fenYeKG:true,//分页开关
				erRedPacketTip:'',//红包兑换二维码下面的提示文字
				shieldBox:false,//底部禁言留言
		        sdkId:'',
		        acType:'',
		        isFirstShopping:true,//第一次进入
		        oneShow: false, //点赞加一
		        redListParent:[],//红包列表
		        isStartRedPacket:false,//红包弹出显示不显示组件
		        enterType:'',//红包区分直接弹出和红包按钮历史
		        renderCom:0,//红包组件强制刷新
		        isRedGif:false,//红包按钮开关
        inviteShow:false,//邀请卡按钮是否显示
        getRoomRl: null,
      };
		},
    props: {
      imNotice:{
        type:Boolean,
        default: false
      },
      msgHeight:{
        type:String
      }
    },
		mixins: [baseIm,socket],
		watch: {
      '$store.state.isYk': function (v) {
         this.initYk(v)
      },
      getInit(cur,old){
        if(cur == true){
          let that = this
          that.$http.get("/h5live/getUserSix").then(
            res => {
              if(res.data.code == "000000") {
                //console.log("userSix is",res.data.data)
                that.isInit = true;
                  that.iniIm(
                  that.sdkId,
                  that.acType,
                  that.roomId,
                  that.un,
                  that.nickname,
                  that.wxpic,
                  res.data.data,
                  () => {
                    that.initWebSocket('/liveSocket/liveRoom?token='+that.$token+'&plat='+fun.getPlatform()+'&roomId='+that.roomId+'&channel='+that.$channel);
                  }
                );
              }
            },
            err => {}
          );
        }
      },
			//监听底部按钮颜色变化
			liveMessage() {
				if(!this.liveMessage) {
					this.btnSend = "send"
				} else {
					this.btnSend = "send-red"
				}
			},
			screenHeight(val) {
				if(/(Android)/i.test(navigator.userAgent)) {
					if(this.originHeight != val) {
						this.isOriginHei = false;
					} else {
						this.isOriginHei = true;
					}
				}
			},
			uinfo(curVal) {
				if(curVal.un != undefined && curVal.un.length > 0) {
					this.un = curVal.un;
					this.nickname = curVal.nickname;
					this.wxpic = curVal.wxpic;
					this.getRoomInfo(this.anchor);

				}
			},
			imState(curVal, oldVal) {
				if(curVal == 0) {
					console.log("watch socket is close");
				}
			},
			marquee: {
				handler(newtext, oldtext) {
					if(this.marquee.length > 0) {
						if(this.marquee[0].length < 20) {
							this.marqueeStr = 15 * 25;
							this.marqueeTime = (parseInt(this.marqueeStr) + parseInt(this.note1.left)) * 15;
						} else {
							this.marqueeStr = this.marquee[0].length * 18;
							this.marqueeTime =
								(parseInt(this.marqueeStr) + parseInt(this.note1.left)) * 15;
						}
						//console.log(this.marqueeTime + "====" + this.marqueeStr);
					}
				},
				deep: true
			},
		   //进入直播间提示
		   maraueeTipUnArray:{
		   	 handler(newtext, oldtext){

		   	 },
			deep: true
		   },
			binding: {
				handler(curVal, oldVal) {
					this.errorShowD = false;
				}
      },
      shoppingList(val, oldVal) {//防止滑动一键下单商品列表时 后面的评论跟着一起滑动
        let close = val.includes('shopping-list-close')
        if (val == 'shopping-list' || close) {
          this.$refs.refComment.style.overflow = ''
        } else {
          this.$refs.refComment.style.overflow = 'hidden'
        }
      },
      getRoomRl(val,old) {//国盛证券直播间风险等级 null或者0时没有配置风险等级，直接可以观看
        if(this.$channel == "gszq") {
          if (val) {
            this.gsRoomTip(val)
          }
        };
      }
		},
		beforeCreated: function() {},
		mounted: function() {
		      this.$nextTick(() => {
		        try{
		          if(window.DzhAppJs != undefined && window.DzhAppJs.forceShowCloseButton != undefined){
		             DzhAppJs.forceShowCloseButton(1)
		          }
		        }catch (e) {
		        }
		      })
		    document.body.style.overflow = 'hidden'
			//计算进入房间提示滚动距离
		    this.computeLeft = document.body.clientWidth*210/375
			this.getYQshow();
			this.setIntervalMarquee();

			this.intervaltime = setInterval(this.messageArrary, 1000);
			const that = this
			// window.onresize = () => {
			// 	return(() => {
			// 		that.screenHeight = window.innerHeight
			// 	})()
			// }
			window.addEventListener('resize',() => {
				return(() => {
					that.screenHeight = window.innerHeight
				})()
			})

            //分页留言
            let  _this = this;
            _this.$refs.refComment.onscroll =function(){
            	let scrollTop =  _this.$refs.refComment.scrollTop;
				let windowHeight = _this.$refs.refComment.clientHeight;
				let scrollHeight = _this.$refs.refComment.scrollHeight;
				//console.log('scrollTop:'+scrollTop+'windowHeight:'+windowHeight+'scrollHeight：'+scrollHeight)
				if(scrollTop +windowHeight+2>= scrollHeight && _this.fenYeKG){
			    _this.fenYeKG = false
				_this.fenYePage++
				_this.$http.get("/h5live/historyMessage?roomId=" + _this.roomId + "&id="+_this.pageId+"&page="+_this.fenYePage).then(
					res => {
						let msgHtml = "";
						if(res.data.code == "000000") {
							let data = res.data.data.msg.items;
							if(res.data.data.msg.items.length=='0'||res.data.data.msg.items.length<10){
								_this.fenYeKG = false
							}else{
								 _this.fenYeKG = true
							}
							_this.footerNum = res.data.data.hitCount;
							let messageHtml = "";
							//type 0是留言  1是点赞  2是红包
							data.forEach(function(ele, index) {
								if(ele.avator) {
                                    ele.avator = fun.disposeTx(ele.avator)
								}
					let newItem = document.createElement("li");
					newItem.className = "msg-li-li";
					let leftBox = document.createElement("div");
					leftBox.className = "li-msg-left";
					let img = document.createElement("img");
					img.src = ele.avator != undefined ? ele.avator : imgTx;
                    img.onerror = window.imgError
					leftBox.appendChild(img);
					newItem.appendChild(leftBox);
					let rightBox = document.createElement("div");
					rightBox.className = "li-msg-right";
					let p = document.createElement("p");
					p.className = "nickBox";
					if(ele.type=='6'||ele.un.includes('zbzlpt')){
						let spanOfficial= document.createElement("span");
						spanOfficial.className = "official-span";
						spanOfficial.innerHTML = "官方";
						p.appendChild(spanOfficial);
					}
					let span1 = document.createElement("span");
					span1.className = "nikeNameRuan";
					span1.innerText = ele.nickName==null?ele.un:ele.nickName;
					p.appendChild(span1);
					let span2 = document.createElement("span");
					span2.className = "liveTimeRuan";
					span2.innerText = ele.addTime.slice(5, 10)+"  " +ele.addTime.slice(11, 16);
					p.appendChild(span2);
					let divConnectText = document.createElement("div");
					divConnectText.className = "connect-boxText";
					rightBox.appendChild(divConnectText);
					rightBox.appendChild(p)
                    rightBox.appendChild(divConnectText)
					newItem.appendChild(rightBox);
					if(ele.type == 1){//点赞
						let i = document.createElement("i");
						i.style = "color:gold";
						i.append("送出一个赞");
						divConnectText.appendChild(i);
					}else if(ele.type == 2){//红包
						let div = document.createElement("div");
							div.className = "hongbaohtml";
							div.setAttribute("datahbid", JSON.parse(ele.message).packetNo);
							div.setAttribute("datahbtitle", JSON.parse(ele.message).packetDesc);
							div.setAttribute("datahbnickname", ele.nickName);
							var 	pTitle = document.createElement("p");
							pTitle.className = "pTitleClass";
							pTitle.innerText = JSON.parse(ele.message).packetDesc;
							div.appendChild(pTitle);
							divConnectText.appendChild(div);
					}else{
						if(ele.type=='6'){
						   let eleItem = JSON.parse(ele.message)
						   let spanNameArt = document.createElement("span");
						   spanNameArt.className = "name-art";
						   spanNameArt.innerText = `@${eleItem.parent.nickName}`;
						   divConnectText.appendChild(spanNameArt);
						   //    创建底部div
						let divReplyMessage =document.createElement("div");
							divReplyMessage.className="reply-msg-box";
						let pReplyNick = document.createElement("P");
							pReplyNick.className="reply-nick-box";
						let spanReplyName=	document.createElement("span");
							spanReplyName.className="reply-name";
							spanReplyName.innerText=eleItem.parent.nickName;
						let spanReplyTime =document.createElement("span");
							spanReplyTime.className="reply-time";
							spanReplyTime.innerText=eleItem.parent.addTime.slice(5, 10)+"  " +eleItem.parent.addTime.slice(11, 16)
						let divReplyText = document.createElement("div");
							divReplyText.className ="reply-text"
							divReplyText.innerText=eleItem.parent.message
							rightBox.appendChild(divReplyMessage)
							divReplyMessage.appendChild(pReplyNick);
							divReplyMessage.appendChild(divReplyText)
							pReplyNick.appendChild(spanReplyName);
							pReplyNick.appendChild(spanReplyTime);
							let spanMessage =document.createElement("span");
							spanMessage.className="message-box-span"
							spanMessage.innerText = eleItem.msg
							divConnectText.appendChild(spanMessage)

						}else{
							let spanMessage =document.createElement("span");
							spanMessage.className="message-box-span"
							spanMessage.innerText = ele.message
							divConnectText.appendChild(spanMessage)
						}


						// divConnectText.innerText = ele.message
					}

					if(_this.$refs.msgContent.children.length == 0) {
						let li1 = document.createElement("li");
						li1.style = "display:none";
						_this.$refs.msgContent.appendChild(li1);
					}
					_this.$refs.msgContent.insertBefore(
						newItem,
						_this.$refs.msgContent.childNodes[_this.$refs.msgContent.childNodes.length+1]
					);
                     });
								//console.log(msgHtml)
								//爬坑 msgHtml是dom结构不是结点，要先创建一个结点 在插入
								//let newPageItem = document.createElement("DIV")
								//newPageItem.innerHTML = msgHtml;
							   //_this.$refs.msgContent.appendChild(newPageItem)
						}
					},
					err => {
						console.log(err);
					}
				);
				}
            }

			// document.body.addEventListener('focusout', () => { //软键盘关闭事件
			// 	alert('软键盘失去焦点')
        // })
		},
		created: function() {
			this.getRightList();
			this.$store.dispatch("hideNav");
			this.$store.dispatch("setRoomTab", 1);
			this.un = this.$store.state.userInfo.un;
			this.nickname = this.$store.state.userInfo.nickname;
			this.wxpic = this.$store.state.userInfo.wxpic;
      this.getRoomSetting(()=>{
        this.getRoomInfo(this.anchor);
      });

			this.getShoppingData(); //请求一键下单链接
			if( this.$channel == config.ZGYH || this.$channel == config.ZGYH_PX) {
				let _this = this
				_this.footerChannelShow = true //控制底部显示样式根据机构号
				let curVersion = window.terminal.appVersion;
				//let curVersion = "6.2.1";
				let oldVersion = "5.2.0";
				_this.zhonghangresuliYiJian = versionCompare(curVersion, oldVersion)
				console.log("当前APP版本" + curVersion) //1 是高于  0  是相等   -1 是低于
			}else {
				this.footerChannelShow = true//控制底部显示样式根据机构号
				if(this.$channel=='gdyj'){//光大业绩发布会隐藏footer
					this.footerChannelShow = false//控制底部显示样式根据机构号
				}else{
					this.footerChannelShow = true//控制底部显示样式根据机构号
				}
			};
      this.initYk(this.$store.state.isYk)
      //根据roomid屏蔽发言区域1409  1395  后面改为机构号zgyh全部屏蔽留言
      if(this.$route.params.roomid=='1467'||this.$route.params.roomid=='1583'){
          this.shieldBox = true;
      };


		},
		computed: {
		  getYk(){
        return this.$store.state.isYk
      },
		  getInit(){
		    if(this.imNotice.imNotice == true){
		      return true
        }else{
		      return false
        }
      },
			TabArray() {
				return this.$store.state.liveNavTabArray;
			},
			sysInfo() {
				return this.$store.state.SysOrgInfo;
			},
			uinfo() {
				return this.$store.state.userInfo;
			},
			imState() {
				return this.$store.state.imState;
      },
		},
		activated: function() {//keep-alive 组件被激活时调用
			document.body.style.overflow = 'hidden'
		    this.shoppingList = 'shopping-list'
			var TabArray11;
			if(sessionStorage.getItem("liveNavtable")) {
				TabArray11 = JSON.parse(sessionStorage.getItem("liveNavtable"))
			} else {
				TabArray11 = this.$store.state.liveNavTabArray
			}
			for(var i = 0; i < TabArray11.length; i++) {
				if(TabArray11[i].type == 1) {
					this.$store.dispatch("setRoomTab", ++i)
				}
			}
       if(this.footerChannelShow){
       	 	    document.getElementById('zanTeXiao').onclick = function() {
				let boomChildList = [];
				const icon = [require('../assets/images/zan1.svg'),
					require('../assets/images/zan2.svg'),
					require('../assets/images/zan3.svg'),
					require('../assets/images/zan4.svg'),
					require('../assets/images/zan5.svg'),
					require('../assets/images/zan6.svg'),
					require('../assets/images/zan7.svg'),
					require('../assets/images/zan8.svg'),
					require('../assets/images/zan9.svg'),
					require('../assets/images/zan10.svg'),
					require('../assets/images/zan11.svg'),
					require('../assets/images/zan12.svg')
				]
				for(let i = 0; i < icon.length; i++) {
					let temDom = document.createElement('div')
					temDom.className = 'demoDom';
					temDom.innerHTML = `<img src="${icon[i]}">`
					// oBox.appendChild(temDom);
					boomChildList.push(temDom);
				}
				let boom = new Boom({
					particleList: boomChildList,
					container: this
				});
				boom.boom()
			}
       }

		},
		deactivated: function() {//keep-alive 组件被移除时候调用
			clearTimeout(this.t1)
			//this.shoppingIsShowList = false
			document.body.style.overflow = ''
		},
		destroyed: function() {//组件销毁时候调用
			document.body.style.overflow = ''
			clearInterval(this.intervaltime);
			clearInterval(this.codeInterval); //关闭验证码倒计时
			clearInterval(this.PMD_MarqueeTipInterval);//关闭跑马灯 进入房间提示
		},

		methods: {
      //国盛直播间风险提示  null或0 未配置风险等级 公开无限制观看直播
      gsRoomTip(roomRl) {
        let userRl = this.$store.state.userRl//用户风险等级
        if (this.$store.state.isYk) {//游客 去登录
          // fun.gszqGoLogin()
          fun.toastMessage("请登录APP观看")
          setTimeout(() => {
            this.$router.replace(`/${this.$channel}/home`)
          }, 2000);
          return;
        } else {
          if (userRl == null) {
            fun.toastMessage("请登录APP观看")
            setTimeout(() => {
              this.$router.replace(`/${this.$channel}/home`)
            }, 2000);
            return;
          } else {// userRl >=0
            if (userRl < roomRl) {
              this.$store.dispatch("setShowGsTip", true)//弹风险提示
            } else {
              this.$store.dispatch("setShowGsTip", false)
            }
          }

        }

      },
			childCallBackFromRedPacket(){
				this.isStartRedPacket = false;
			},
			clickRedGif(){
				if(this.$store.state.isYk){
					fun.toastMessage("亲，登录后才能抢红包哦～")
					return ;
				}
				this.enterType = 'redBtn';
				let params = {
					'qid':Math.random(),
					'roomId': this.roomId
		        }
	           this.$http.post('/packet/room_packet_list', this.$qs.stringify(params)).then( //点击商品统计
					res => {
						//console.log(res.data)
						if(res.data.code == "000000") {
							if(res.data.data){//防止null
								if(res.data.data.length){
                            	this.redListParent = res.data.data;
                            	this.isStartRedPacket = true;
	                            }else{
	                            	 fun.toastMessage('红包马上开始，不要离开哦...')
	                            }
							}else{
								fun.toastMessage('红包马上开始，不要离开哦...')
							}

						}
					},
					err => {
						console.log("商品统计接口错误")
					}
				)
			},
      initYk(cur){
        let _this = this
        if(cur) {
          _this.YKCoverIs = true
          fun.ykDisposeFun('当前为游客模式')
          if(_this.$source == '10') {
            return
          }
          if(_this.$channel == config.ZGYH  || _this.$channel == config.ZGYH_PX){//只有在中行才弹出
            if(_this.ownerid!= 'gk_gonghui'){//中国银行主播下面的游客提示不弹出
              setTimeout(function() {
                _this.$emit("imMessage", {
                  "type": "YKTipPage"
                });
              }, 120000)// 120000
            }
          }
        } else {
          _this.YKCoverIs = false
        }
      },
			//邀请卡显示不显示
			getYQshow() {
				let _this = this;
				_this.$http.get("/h5live/getRoomInvitaCard?roomId=" + _this.roomId).then(
					res => {
						if(res.data.code == "000000") {
							let channelArr = [config.ZHANGHANG_01, config.ZGYH, config.ZGYH_PX];
							let cardId=res.data.data.invitaCard
							let qaTypeArrary = {
							 	  "qaType": 2
								}
							if(channelArr.indexOf(_this.$channel) > -1){
								//中行
								if(cardId === 1){
								setTimeout(function() {
									// _this.rightList.unshift(qaTypeArrary)
									_this.inviteShow=true
								}, 100)
								}else if(cardId === 2){
									_this.yqylShow = true
								}else{
									_this.yqylShow = false
								}
							}else{//非中行
								if(cardId == 1 || cardId == 2){
								setTimeout(function() {
									//_this.rightList.unshift(qaTypeArrary)
									_this.inviteShow=true
								  }, 100)
								}else{
									_this.yqylShow = false
								}
							}
						}
					},
					err => {
						console.log(err);
					}
				);
			},
			//直播间外链名字
			getLiveLinkTitle() {
				let _this = this;
				_this.$http.get("/h5live/getGoodsTitle?type=0&rvid="+this.roomId).then(
					res => {
						if(res.data.code == "000000") {
							_this.linkTitleText = res.data.data
						}
					},
					err => {
						console.log(err);
					}
				);
			},
			//邀请里面二维码
			getCardER() {
				let ERcode;
       if(this.$channel=='zyzq'){
          ERcode = 'https://e.eqxiu.com/s/0KbV42Z9?bt=yxy'
        }else{
					ERcode = window.location.protocol + "//" + window.location.host + "/#/" + this.$channel + "/live_particulars/" + this.anchor +"/"+this.roomId+ "/liveMsg?fromUn=" + this.$store.state.userInfo.un + "&urlSceneId= "+ this.sceneId;
				}

               this.$lockr.set("ERcode", ERcode)
			},
			inputchange() {

			},
			//点击商品列表里面的某个商品链接
			clickShoppingLink(id, vLink) { //   id 商品id   vLink 商品链接
				let params = {
					'id': id,
					'plat': fun.getPlatform()
}
					//中信银行==>对接app数据格式
					//中信0615最新的配置参数
					//{
					//	"wx": {
					//		"url":"https://wap.bank.ecitic.com/NMBFOServer/WebMB/MBbuymetalourchaseDetailShare/buymetalourchaseDetailShare.html?10EFCEEEC3A15F953FC315B5F8E99733F780DEAFD25935D2DDDA3EF5FC2BA6873FBD029FA5F8ACA4$=#7"
					//	},
					//	"app": {
					//		"productMenuid": "1004161",
					//		"menuParams": {
					//			"type": "shareInvestedChose",
					//			"SUBBANKNO": "0107",
					//			"PRDCODE": "3030603035",
					//			"host": "http://mb.citic-mall.com/stones/code/1031.html",
					//			"noback": "1",
					//			"ad_channel": "NBQD_zxyh_shpd2"
					//		}
					//	}
					//}

this.$http.post('/h5live/goodsClick', this.$qs.stringify(params)).then( //点击商品统计
					res => {
						if(res.data.code == "000000") {
							if(this.$channel=='zxyh'){
								let data = JSON.parse(vLink);
								let productParams = data.app.menuParams;
								let  userAgent = navigator.userAgent;
								if(/citicbankmobile/i.test(userAgent)){//中信app
									 if(window.bridgeReady && window.bank && window.bank.browserPlugin) {
											//跳转页面的逻辑判断
											window.bank.browserPlugin.openByMenuId({
													'menuId': data.app.productMenuid, //菜单id
												    'menuParams': productParams //菜单参数json
											})
										}

					             }else{//不在app里面
					             	this.shoppingList = "shopping-list"
					             	window.location.href = data.wx.url;

					             }
							}else{//非中信银行
								this.shoppingList = "shopping-list"
								window.location.href = vLink;
							}
						}
					},
					err => {
						console.log("商品统计接口错误")
					}
				)
			},
			//点击外链
			animateShoppingClick() {
					//"hasGoods",1有商品 0 无商品
				   //1:先判断是不是中行   2：是不是微信还是app  3：如果是中行 判断版本 是不是高于 3.0.0     4：判断加不加参数
				if(this.$store.state.isYk) {//游客
					if(this.$channel == config.ZGYH  || this.$channel == config.ZGYH_PX){
							this.$emit("imMessage", {
							"type": "YKTipPage"
						});
					}else if(this.$channel==='gdxlxt'){
                          fun.ykDisposeFun()
					}else{
						this.shoppingDataArray = []
					    this.getShoppingData()
					}

				}else{//非游客
					this.shoppingDataArray = []
					this.getShoppingData()
				}
			},
			//shopping  关闭
			shoppingClose() {
				if(this.shoppingLength == "1") {
					this.shoppingList = "shopping-list-close1"
				} else if(this.shoppingLength == "2") {
					this.shoppingList = "shopping-list-close2"
				} else if(this.shoppingLength == "3") {
					this.shoppingList = "shopping-list-close3"
				}
				if(this.shoppingLength >= 4) {
					this.shoppingList = "shopping-list-close3"
				}
			},
			//一键下单
			getShoppingData() {
				let _this = this;
				_this.$http.get('/h5live/getRoomGoods?type=0&mixId=' + _this.roomId).then((res) => {
					var ua = navigator.userAgent.toLowerCase();
					//_this.shoppingLength = "2"
					if(res.data.code == '000000') {
						if(res.data.data) {
							if(_this.isFirstShopping == true){//第一次进入
								_this.isFirstShopping = false;
								if((/MicroMessenger/i).test(ua)){ //微信
									for(let i = 0; i < res.data.data.length; i++) {
										if(res.data.data[i].goodsTarget == "1") { // 0 app  1 微信
											_this.shoppingIsShow = true
										}
									}
								}else{//app
									for(let i = 0; i < res.data.data.length; i++) {
										if(res.data.data[i].goodsTarget == "0") { // 0 app  1 微信
											_this.shoppingIsShow = true
										}
									}
								}
								if(_this.shoppingIsShow ==true){
									_this.getLiveLinkTitle(); //请求一键下单  title
								}
							}else{//第二次进入
								if((/MicroMessenger/i).test(ua)){//微信
									let shoppingArraryNum = 0;
									for(let i = 0; i < res.data.data.length; i++) {
										if(res.data.data[i].goodsTarget == "1") { //微信
											shoppingArraryNum++;
											_this.shoppingDataArray.push(res.data.data[i])
										}
									}
									_this.shoppingLength = shoppingArraryNum;
									if(_this.shoppingLength <=3) {
										_this.shoppingList = "shopping-list"+_this.shoppingLength;
									}else{
										_this.shoppingList = "shopping-list3";
									}
								}else{//非微信
									let shoppingArraryNum = 0;
									for(let i = 0; i < res.data.data.length; i++) {
										if(res.data.data[i].goodsTarget == "0") { //非微信
											shoppingArraryNum++;
											_this.shoppingDataArray.push(res.data.data[i])
										}
									}
									_this.shoppingLength = shoppingArraryNum;
									if(_this.shoppingLength <=3) {
										_this.shoppingList = "shopping-list"+_this.shoppingLength;
									}else{
										_this.shoppingList = "shopping-list3";
									}
								}
							}

//							if((/MicroMessenger/i).test(ua)){ //微信
//								let shoppingArraryNum = 0;
//								for(let i = 0; i < res.data.data.length; i++) {
//									if(res.data.data[i].goodsTarget == "1") { //app
//										shoppingArraryNum++;
//										_this.shoppingDataArray.push(res.data.data[i])
//									}
//								}
//								_this.shoppingLength = shoppingArraryNum;
//								if(shoppingArraryNum != 0) {
//									_this.getLiveLinkTitle(); //请求一键下单  title
//									setTimeout(function() {
//										_this.shoppingIsShow = true
//									}, 2000)
//								} else {
//									_this.shoppingIsShow = false
//								}
//							} else { //app
//								let shoppingArraryNum = 0;
//								for(let i = 0; i <res.data.data.length; i++) {//res.data.data.length
//									if(res.data.data[i].goodsTarget == "0") { //app
//										shoppingArraryNum++;
//										_this.shoppingDataArray.push(res.data.data[i])
//									}
//								}
//								_this.shoppingLength = shoppingArraryNum;
//								if(shoppingArraryNum != 0) {
//									_this.getLiveLinkTitle(); //请求一键下单  title
//									//setTimeout(function() {
//										_this.shoppingIsShow = true
//									//}, 2000)
//								} else {
//									_this.shoppingIsShow = false
//								}
//							}

						}
					}
				}, (err) => {

				})
			},
			//input 失去焦点  解决ios 最新版本6.7.4 input BUG
			blurRu() {
				setTimeout(function() {
					window.scrollTo(0, 0)
				}, 100)
				//this.errorShowD = false;
			},
			blurRuA() {
				setTimeout(function() {
					window.scrollTo(0, 0)
				}, 100)
				this.errorShowD = false;
			},
			//点击或者焦点
			footerInput() {
				//this.$refs.footerInputRu.focus()
			},
			clickFocus() {
				// this.$refs.mobileInput.focus()
				let that=this.$refs.mobileInput
				setTimeout(function(){
		   			 that.scrollIntoViewIfNeeded();
   				},500)
			},
			//自定义消息跑马灯
			pmdData(data) {
				let _this = this;
				for(let i = 0; i < data.number; i++) {
					this.marquee.push(data.content);
				}
			},
			//发送消息失败 禁言
			bannedToPost(data){
				if(data.ErrorCode=='10017'){
                   fun.toastMessage("本场您已被禁言",1500)
				}
			},
			//自定义小助理消息
			heaperMessage(ele){
				let newItem = document.createElement("li");
					newItem.className = "msg-li-li";
					let leftBox = document.createElement("div");
					leftBox.className = "li-msg-left";
					let img = document.createElement("img");
					img.src = ele.fromAccountHeadurl != undefined ? ele.fromAccountHeadurl : imgTx;
                    img.onerror = window.imgError
					leftBox.appendChild(img);
					newItem.appendChild(leftBox);
					let rightBox = document.createElement("div");
					rightBox.className = "li-msg-right";
					let p = document.createElement("p");
					p.className = "nickBox";
					let spanOfficial= document.createElement("span");
					spanOfficial.className = "official-span";
					spanOfficial.innerHTML = "官方";
					p.appendChild(spanOfficial);
					let span1 = document.createElement("span");
					span1.className = "nikeNameRuan";
					span1.innerText = ele.fromAccountNick||'';
					p.appendChild(span1);
					let span2 = document.createElement("span");
					span2.className = "liveTimeRuan";
					let getTime = ele.time||new Date().getTime()/1000
					let times = this.timeFormat(getTime*1000)
					span2.innerText = times.slice(5, 10)+"  " + times.slice(11, 16);
					p.appendChild(span2);
					let divConnectText = document.createElement("div");
					divConnectText.className = "connect-boxText";
					divConnectText.innerHTML=JSON.parse(ele.elems[0].content.data).content
					rightBox.appendChild(divConnectText);
					rightBox.appendChild(p)
                    rightBox.appendChild(divConnectText)
					newItem.appendChild(rightBox);
                    this.$refs.msgContent.insertBefore(
							newItem,
							this.$refs.msgContent.childNodes[0]
				        );

			},
				//时间戳转化成时间格式
				timeFormat(timestamp){
					var time = new Date(timestamp);
					var year = time.getFullYear();
					var month = time.getMonth()+1;
					var date = time.getDate();
					var hours = time.getHours();
					var minutes = time.getMinutes();
					var seconds = time.getSeconds();
					return year+'-'+this.add0(month)+'-'+this.add0(date)+' '+this.add0(hours)+':'+this.add0(minutes)+':'+this.add0(seconds);
				},
				add0(m){return m<10?'0'+m:m },

			//自定义回复消息
			replyMessage(ele){
					let newItem = document.createElement("li");
					newItem.className = "msg-li-li";
					let leftBox = document.createElement("div");
					leftBox.className = "li-msg-left";
					let img = document.createElement("img");
					img.src = ele.avator != undefined ? ele.avator : imgTx;
                    img.onerror = window.imgError
					leftBox.appendChild(img);
					newItem.appendChild(leftBox);
					let rightBox = document.createElement("div");
					rightBox.className = "li-msg-right";
					let p = document.createElement("p");
					p.className = "nickBox";
					let spanOfficial= document.createElement("span");
					spanOfficial.className = "official-span";
					spanOfficial.innerHTML = "官方";
					p.appendChild(spanOfficial);
					let span1 = document.createElement("span");
					span1.className = "nikeNameRuan";
					span1.innerText = ele.nickName==null?ele.un:ele.nickName;
					p.appendChild(span1);
					let span2 = document.createElement("span");
					span2.className = "liveTimeRuan";
					span2.innerText = ele.addTime.slice(5, 10)+"  " +ele.addTime.slice(11, 16);
					p.appendChild(span2);
					let divConnectText = document.createElement("div");
					divConnectText.className = "connect-boxText";
					rightBox.appendChild(divConnectText);
					rightBox.appendChild(p)
                    rightBox.appendChild(divConnectText)
					newItem.appendChild(rightBox);
					let spanNameArt = document.createElement("span");
					spanNameArt.className = "name-art";
					spanNameArt.innerText = `@${ele.parent.nickName}`;
					divConnectText.appendChild(spanNameArt);
					let divReplyMessage =document.createElement("div");
					divReplyMessage.className="reply-msg-box";
					let pReplyNick = document.createElement("P");
					pReplyNick.className="reply-nick-box";
					let spanReplyName=	document.createElement("span");
					spanReplyName.className="reply-name";
					spanReplyName.innerText=ele.parent.nickName;
					let spanReplyTime =document.createElement("span");
					spanReplyTime.className="reply-time";
					spanReplyTime.innerText=ele.parent.addTime.slice(5, 10)+"  " +ele.parent.addTime.slice(11, 16)
					let divReplyText = document.createElement("div");
					divReplyText.className ="reply-text"
					divReplyText.innerText=ele.parent.message
					rightBox.appendChild(divReplyMessage)
					divReplyMessage.appendChild(pReplyNick);
					divReplyMessage.appendChild(divReplyText)
					pReplyNick.appendChild(spanReplyName);
					pReplyNick.appendChild(spanReplyTime);
					let spanMessage =document.createElement("span");
					spanMessage.className="message-box-span"
					spanMessage.innerText = ele.message
					divConnectText.appendChild(spanMessage)
                    this.$refs.msgContent.insertBefore(
							newItem,
							this.$refs.msgContent.childNodes[0]
				        );


			 },
			//自定义消息红包
			hongbaostartruan(data) {
			    this.hongbaoData = data;
			    if(!this.$store.state.isYk){
                    this.renderCom ++;
                    this.enterType = 'redPopup';
                    this.isStartRedPacket = true;
				}
				let li = document.createElement("li");
				li.className = "msg-li-li";
				let img = document.createElement("img");
				let leftBox = document.createElement("div");
				leftBox.className = "li-msg-left";
				img.src = data.icon;
				leftBox.appendChild(img);
				li.appendChild(leftBox);
				let rightBox = document.createElement("div");
				rightBox.className = "li-msg-right";
				let p1 = document.createElement("p");
				p1.className = "nickBox";
				let span1 = document.createElement("span");
				span1.className = "nikeNameRuan";
				span1.innerText = data.payerOrg;
				p1.appendChild(span1);
				let span2 = document.createElement("span");
				span2.className = "liveTimeRuan";
				p1.appendChild(span2);
				span2.innerText = data.PushTime;
				rightBox.appendChild(p1);
				let divConnectText = document.createElement("div");
					divConnectText.className = "connect-boxText";
				let div = document.createElement("div");
				div.className = "hongbaohtml";
				div.setAttribute("dataHBID", data.orderNo);
				div.setAttribute("dataHBTitle", data.title);
				var pTitle = document.createElement("p");
				pTitle.className = "pTitleClass";
				pTitle.innerText = data.title;
				div.appendChild(pTitle);
				divConnectText.appendChild(div);
				rightBox.appendChild(divConnectText);
				li.appendChild(rightBox);
				this.$refs.msgContent.insertBefore(
					li,
					this.$refs.msgContent.childNodes[0]
				);
			},
			//历史消息抢红包
			redPacketHistoryClick(e) {
					let _this = this
					if(this.$store.state.isYk) {
						if(_this.$channel == config.ZGYH || _this.$channel == config.ZGYH_PX) {
							_this.$emit("imMessage", {
								"type": "YKTipPage"
							});
							return
						} else if(this.$channel == 'gszq' && window.terminal.isGszqApp) {
							// fun.gszqGoLogin()//登录app
							fun.ykDisposeFun("请登录app")
						} else {
							fun.ykDisposeFun()
							return
						}

					}
					if(e.target.nodeName.toLowerCase() =='div'&& e.target.className=="hongbaohtml" ||e.target.className=="hongbaohtml1" ) {//当点击的是红包图片					
						let hongBaoID = e.target.getAttribute("dataHBID");
						let hongBaoTitle = e.target.getAttribute("datahbtitle");
						let hongBaoOrg = e.target.getAttribute("datahbnickname");
						//this.enterType = 'redPopup';
						this.hongbaoData = {
							    "crtTime": "",
								"handoutTime": "",
								"icon": "",
								"money":"" ,
								"orderNo": hongBaoID,
								"packetStatus": "",
								"payerOrg":hongBaoOrg,
								"redNum": "",
								"roomId": "",
								"title": hongBaoTitle,
								"zbAct": "",
						}
						 this.enterType = 'messageRedPacket';
                         this.isStartRedPacket = true;
						e.target.className = "hongbaohtml1";
					}else if(e.target.nodeName.toLowerCase() == 'p'&& e.target.className=="pTitleClass"){//当点击的是红包标题
						//console.log(e.target.parentNode.getAttribute("dataHBID"))
						let parentHongBaoID = e.target.parentNode.getAttribute("dataHBID");
						let parentHongBaoTitle = e.target.parentNode.getAttribute("datahbtitle");
						let hongBaoOrg =e.target.parentNode.getAttribute("datahbnickname");
						//this.enterType = 'redPopup';
						this.hongbaoData = {
							    "crtTime": "",
								"handoutTime": "",
								"icon": "",
								"money":"" ,
								"orderNo": parentHongBaoID,
								"packetStatus": "",
								"payerOrg":hongBaoOrg,
								"redNum": "",
								"roomId": "",
								"title": parentHongBaoTitle,
								"zbAct": "",
						}
						 this.enterType = 'messageRedPacket';
                         this.isStartRedPacket = true;
						e.target.parentNode.className = "hongbaohtml1";
					}else{

					}
			},
			getRoomInfo(OwnerAccount) {
				if(this.isInit || !this.un) {
					return;
				}
				this.isInit = true;
				let that = this;
				that.$http.get("/h5live/getRoomInfo?roomId=" + this.roomId).then(
					res => {
						if(res.data.code == "000000") {
              this.getRoomRl = res.data.data.roomRl
							let roomInfo = res.data.data.roomInfo;
							that.sceneId = roomInfo.sid;
							this.getCardER() //二维码URL  获取场次id 调用邀请卡里面的二维码加上 场次id
							that.$emit("imMessage", {type: "chatNum",data: res.data.data.hdCount});
							let scene = roomInfo.sid;
							that.sdkId = res.data.data.sdkId;
							that.acType = res.data.data.acType;
							if(scene) {
				                that.getRoomComment(scene); //直播间留言
				                if (that.shieldBox) {//后台关闭评论
				                  that.footerPlaceholder = '评论功能已关闭'
				                } else {
				                  that.footerPlaceholder = '有什么想要说的吗...';
				                }
							} else {
								that.footerPlaceholder = '主播暂未开播，不能留言';
							}
							if(roomInfo.roomId) {
								that.$emit("imMessage", {
									type: "roomInfo",
									data: {
										roomInfo: roomInfo,
										sceneId: scene
									}
								});
								if(roomInfo.roomStatus == 1) {
									that.liveType = 2;
								}else if(roomInfo.roomStatus == 2){
                  that.liveType = 16;
                }
								if(roomInfo.showStyle != undefined) {
									that.showStyle = roomInfo.showStyle
								}

							} else {
								console.log("房间id为空");
							}
							that.$emit("imMessage", {
								type: "topic",
								data: res.data.data.roomInfo.title
							});
							window.sessionStorage.setItem(
								"RoomTopic",
								res.data.data.roomInfo.title
							);

						}
					},
					err => {
						console.log(err);
					}
				);
			},
			updateMember(num) {
				this.$emit("imMessage", {
					type: "member",
					data: num
				});
			},
			//进入房间方法
			TipUnBeforeEnter(el){//进入之前
				el.style.opacity = 1;
				this.marqueeTipClass = this.getMarqueeTipUnClass()
			},
			TipUnEnter(el,done){//进入
				let _this = this
				Velocity(
					el, {
						translateX: _this.computeLeft,
						// this.note1.left
					}, {
						duration: 1000,
						easing: "ease-in-out",
						complete: done
					}
				);
			},
			TipUnAfterEnter(el,done){//进入之后
				Velocity(
					el, {
						opacity: 1,
					}, {
						duration: 1000,
						complete: done
					}
				);
				Velocity(
					el, {
						opacity: 0,
					}, {
						duration: 250,
						complete: done
					}
				);
				Velocity(
					el, {
						translateX: -200,
					}, {
						duration: 0,
						complete: done
					}
				);
				setTimeout(()=>{
					this.marqueeTipUnArray = this.marqueeTipUnArray.slice(1);
					this.marqueeTipUnShow = false;
				}, 1410)

			},
			TipUnBeforeLeave(el,done){//离开之前
				Velocity(
					el, {
						translateX: -200,
					}, {
						duration: 1000,
						complete: done
					}
				);

			},
			TipUnLeave(el,done){//离开
			},
			//随机选取弹幕的一个class色值
			getMarqueeTipUnClass() {
				let marqueeTipUnClass = ["marquee-tip-blue", "marquee-tip-orange", "marquee-tip-orange1"];
				let n = Math.floor(Math.random() * marqueeTipUnClass.length + 1) - 1;
				return marqueeTipUnClass[n];
			},
			handleClick: function() {
				this.marqueeShow = true;
			},
			handleBeforeEnter: function(el) {
				el.style.opacity = 1;
			},
			handleEnter: function(el, done) {
				Velocity(
					el, {
						translateX: -(parseInt(this.marqueeStr) + parseInt(this.note1.left))
					}, {
						duration: this.marqueeTime,
						easing: "linear",
						complete: done
					}
				);
			},
			handleAfterEnter: function(el) {
				this.marqueeShow = false;
			},

			handleBeforeLeave: function(el) {
				el.style.opacity = 0;
				this.marquee = this.marquee.slice(1);
			},
			handleLeave: function(el, done) {
				Velocity(
					el, {
						translateX: 0
					}, {
						duration: 10,
						easing: "linear",
						complete: done
					}
				);
			},
			handleAfterLeave: function(el) {},
			// 跑马灯 和进入房间提示
			setIntervalMarquee() {
			  this.PMD_MarqueeTipInterval = setInterval(this.setInterFun, 1000);
			},
			setInterFun: function() {
				if(this.marquee.length > 0) {//跑马灯
					// 判断有数据
					this.marqueeShow = true;
				} else {}
				if(this.marqueeTipUnArray.length > 0){//进入房间提示
					this.marqueeTipUnShow = true
					if(this.marqueeTipUnArray.length > 50){
					  let randomNum =	this.random(3, 10)
					  this.comeTip=`等${randomNum}人 来到直播间`
					 this.marqueeTipUnArray=this.marqueeTipUnArray.slice(randomNum)
					}

				}
			},
			// 随机整数
			random(min, max){
             return Math.floor(Math.random() * (max - min + 1)) + min;
			},
			//进入房间信息提示回调
			enterRoomPersonTip(nick){
				if(this.isEnterMessage){//true 是进入房间开启提示  false是不提示
					if(this.$store.state.userInfo.nickname!= nick){//当前账号不是自己 push到数组里面
					 this.marqueeTipUnArray.push(nick);
				  }
				}
			},

			sendSqlData(type){ //3  答题  4  问卷  5 投票
				let _this = this;
					let params = {
						'type': type,
						'liveType': this.liveType,
						'anchor': this.ownerid,
						'plat': fun.getPlatform(),
						'sceneId': this.sceneId,
            'roomId': this.roomId,
            'message':''
					};
					_this.$http.post("/h5live/speakSend", _this.$qs.stringify(params)).then(res => {

						},
						err => {
							console.log("speakSend err", err);
						}
					);
			},
			getMessage(msg) {
				let subType = msg.getSubType();
				let text = "";
				let HDhtml = "";
				let typeNum = ''
				switch(subType) {
					case webim.GROUP_MSG_SUB_TYPE.COMMON: // 群普通消息
						text = this.convertMsgtoHtml(msg);
						if(text===this.$channel+'ANSWER'){//typeNum == 3  答题
							typeNum = 3;
							HDhtml =' <div class="HDClass1">提交了答题~ <div class="HDimg classDT"></div></div>'
						}
						if(text===this.$channel+'QUESTION'){//typeNum == 4  问卷
							typeNum = 4;
							HDhtml =' <div class="HDClass1">提交了问卷~ <div class="HDimg classWJ"></div></div>'
						}
						if(text===this.$channel+'VOTE'){//typeNum == 5 投票
							typeNum = 5;
							HDhtml =' <div class="HDClass1">已投票成功~ <div class="HDimg classTP"></div></div>'
						}
						if(trim(text).length == '11') {
							if((/^1[3456789]\d{9}$/.test(trim(text)))) { //是手机号码
								text = trim(text).substring(0, 3) + "****" + trim(text).substring(7, 11);
							}
						}
						break;
					case webim.GROUP_MSG_SUB_TYPE.REDPACKET: // 群红包消息
						text = "[群红包消息]" + this.convertMsgtoHtml(msg);
						break;
					case webim.GROUP_MSG_SUB_TYPE.LOVEMSG: // 群点赞消息
						// 业务自己可以增加逻辑，比如展示点赞动画效果
						//text = '[群点赞消息]' + this.convertMsgtoHtml(msg)
						// this.isShow();
						// 展示点赞动画
						// showLoveMsgAnimation();
						break;
					case webim.GROUP_MSG_SUB_TYPE.TIP: // 群提示消息
                        text = ''
						this.convertMsgtoHtml(msg)
						break;
					default:
						text = msg.tipText;
						break;
				}

				if(text != "") {
					let liSum = this.$refs.msgContent.children;
					 if (liSum.length > 500) {
				         this.$refs.msgContent.removeChild(liSum[liSum.length-1])
				   }
					let newItem = document.createElement("li");
					newItem.className = "msg-li-li";
					let leftBox = document.createElement("div");
					leftBox.className = "li-msg-left";
					let img = document.createElement("img");
					img.src = msg.fromAccountHeadurl != undefined ? fun.disposeTx(msg.fromAccountHeadurl) : imgTx;
                    img.onerror = window.imgError
					leftBox.appendChild(img);
					newItem.appendChild(leftBox);
					let rightBox = document.createElement("div");
					rightBox.className = "li-msg-right";
					let p = document.createElement("p");
					p.className = "nickBox";
					let span1 = document.createElement("span");
					span1.className = "nikeNameRuan";
					span1.innerText = msg.getFromAccountNick();
					p.appendChild(span1);
					let span2 = document.createElement("span");
					span2.className = "liveTimeRuan";
					span2.innerText = this.livetime(this.getTime());
					p.appendChild(span2);
					let divConnectText = document.createElement("div");
					divConnectText.className = "connect-boxText";
					if(subType == webim.GROUP_MSG_SUB_TYPE.LOVEMSG) {
						let i = document.createElement("i");
						i.style = "color:gold";
						i.append("送出一个赞");
						divConnectText.appendChild(i);
						div.appendChild(p3);
					} else {
					   if(typeNum==3||typeNum==4||typeNum==5){
					   	  divConnectText.innerHTML = HDhtml
					   }else{
						   	divConnectText.innerHTML = text;
							this.$emit("imMessage", {
								"type": "msg",
								"data": text
							});
					   }

					}
					rightBox.appendChild(p);
					rightBox.appendChild(divConnectText);
					newItem.appendChild(rightBox);
					if(this.$refs.msgContent.children.length == 0) {
						let li1 = document.createElement("li");
						li1.style = "display:none";
						this.$refs.msgContent.appendChild(li1);
					}
					this.$refs.msgContent.insertBefore(
						newItem,
						this.$refs.msgContent.childNodes[0]
					);
				}
			},
			// 获取直播间配置
			getRoomSetting(cb) {
				let _this = this;
				_this.$http.get("/h5live/getRoomSetting?roomId=" + this.roomId).then(
					res => {
						if(res.data.code == "000000") {
						  if(res.data.data.channel != channel){
		                return this.$router.push(`/${this.$channel}/home`)

		              }
						  cb && cb();
						  if(res.data.data.isPl!=undefined && res.data.data.isPl=='0'){
			                _this.shieldBox = true
			               //_this.YKCoverIs = true
                     _this.footerPlaceholder = '评论功能已关闭'
			              }
							//console.log(res.data.data.enterMessage)//0 是 关闭  1是开启
							// res.data.data.enterMessage = 1
							if(res.data.data.enterMessage){
								this.isEnterMessage = true;//开启进入房间提示
							}else{
								this.isEnterMessage = false;//关闭进入房间提示
                            }
                            if(res.data.data.redPacketSwitch){//true  红包按钮打开 默认关闭
                            	this.isRedGif = true;
                            }
							this.liveMsgData = res.data.data;
							this.$emit("imMessage",{
								type: "setting",
								data: res.data.data
							});
						}
					},
					err => {
						console.log(err);
					}
				);
			},
			getRoomComment(scene) { //scene id
				let _this = this;
				_this.$http.get("/h5live/historyMessage?roomId=" + _this.roomId +"&id="+_this.pageId+"&page="+_this.fenYePage).then(
					res => {
						let msgHtml = "";
						if(res.data.code == "000000") {
							let data = res.data.data.msg.items;
							if(res.data.data.msg.items.length){
								if(res.data.data.msg.items[0].id){
							    _this.pageId = res.data.data.msg.items[0].id;
							 }
							}

							_this.footerNum = res.data.data.hitCount;
							let messageHtml = "";
							//type 0是留言  1是点赞  2是红包  3是答题  4是问卷  5是投票 6回复用户消息
							data.forEach(function(ele, index) {
								if(ele.type == 1) {
									// 点赞
									messageHtml = '<div class="connect-boxText"><i style="color:gold">送出一个赞</i></div>';
								}else if(ele.type == '2'){
									//红包
									//console.log(ele)
								   messageHtml= `<div class="connect-boxText"><div class="hongbaohtml" datahbnickname = '${ele.nickName}'  datahbid="${JSON.parse(ele.message).packetNo}" datahbtitle="${JSON.parse(ele.message).packetDesc}"><p class="pTitleClass">${JSON.parse(ele.message).packetDesc}</p></div></div>`
								}else if(ele.type == '3'){
									//答题
									//console.log(JSON.parse(ele.message).packetDesc)
								   messageHtml = '<div class="connect-boxText"><div class="HDClass">提交了答题~ <div class="HDimg classDT"></div></div></div>'
								}else if(ele.type == '4'){
									//问卷
									//console.log(JSON.parse(ele.message).packetDesc)
									messageHtml = '<div class="connect-boxText"><div class="HDClass">提交了问卷~ <div class="HDimg classWJ"></div></div></div>'
								}else if(ele.type == '5'){
									//投票
									//console.log(JSON.parse(ele.message).packetDesc)
									messageHtml = '<div class="connect-boxText"><div class="HDClass">已投票成功~ <div class="HDimg classTP"></div></div></div>'
								}else if(ele.type == '6'){
									//回复用户消息
									 let itemEle= JSON.parse(ele.message)
									  messageHtml = '<div class="connect-boxText"><span class="name-art">'+'@'+itemEle.parent.nickName+'</span><span class="message-box-span">'+itemEle.msg+'</span></div>'+
									  '<div class="reply-msg-box"><p class="reply-nick-box"><span class="reply-name">'+itemEle.parent.nickName+'</span><span class="reply-time">'+itemEle.parent.addTime.slice(5, 10) +"  " +itemEle.parent.addTime.slice(11, 16)+'</span></p><div class="reply-text">'+itemEle.parent.message+'</div></div>'
								}
								else {
									// 消息
									messageHtml = '<div class="connect-boxText">'+ele.message+'</div>';
								}
								if(ele.avator) {
									ele.avator = fun.disposeTx(ele.avator)
								}
								msgHtml += `<li class="msg-li-li">
										   <div class="li-msg-left"><img onerror="imgError()" src= ${ele.avator || imgTx} /></div>
										   <div class="li-msg-right">
												<p class="nickBox">
												   <span ${ele.type=='6'||ele.un.includes('zbzlpt')?'class="official-span"':'class="message-hidden"'}>官方</span>
													<span class="nikeNameRuan">${ele.nickName==null?ele.un:ele.nickName}</span>
													<span class="liveTimeRuan">${ele.addTime.slice(5, 10) +"  " +ele.addTime.slice(11, 16)}</span>
												</p>
												${messageHtml}
										   </div>

										   </li>`;
								// msgHtml += `<li class="msg-li-li"><div class="li-msg-left"><img onerror="imgError()" src= ${ele.avator || imgTx} /></div><div class="li-msg-right"><p class="nickBox"><span class="nikeNameRuan">${ele.nickName}</span><span class="liveTimeRuan">${ele.addTime.slice(5, 10) +"  " +ele.addTime.slice(11, 16)}</span></p>${messageHtml}</div></li>`;
							});
							_this.$refs.msgContent.innerHTML = msgHtml;
						}
					},
					err => {
						console.log(err);
					}
				);
			},
			// 设置留言和点赞里面的时间
			getTime: function() {
				let date = new Date();
				let seperator1 = "-";
				let seperator2 = ":";
				let month = date.getMonth() + 1; // 月份
				let strDate = date.getDate(); // 天
				let strHours = date.getHours(); // 小时
				let strMinutes = date.getMinutes(); // 分钟
				if(month >= 1 && month <= 9) {
					month = "0" + month;
				}
				if(strDate >= 0 && strDate <= 9) {
					strDate = "0" + strDate;
				}
				if(strHours >= 0 && strHours <= 9) {
					strHours = "0" + strHours;
				}
				if(strMinutes >= 0 && strMinutes <= 9) {
					strMinutes = "0" + strMinutes;
				}
				return(
					date.getFullYear() +
					seperator1 +
					month +
					seperator1 +
					strDate +
					" " +
					strHours +
					seperator2 +
					strMinutes +
					seperator2 +
					date.getSeconds()
				);
			},
			// 直播提交留言
			sendMsg() {
				if(!this.sceneId) {
          fun.toastMessage("直播间暂未开播",1500)
					this.liveMessage = ' ';
					return
        };

				if(this.liveMessage.length > 150) {
          fun.toastMessage("留言字数过多，请重新编辑", 2000)
          return
        };
        let tmpMsg = this.liveMessage;
        this.sendDatabaseMsg()
},
sendDatabaseMsg() { //消息入库 在im回调之后
		let tmpMsg = this.liveMessage;
		let params = {
			'type': '0',
			'liveType': this.liveType,
			'anchor': this.ownerid,
			'message': tmpMsg,
			'plat': fun.getPlatform(),
			'sceneId': this.sceneId,
			'roomId': this.roomId
		};
		//console.log(params)
		let _this = this
		if(tmpMsg != "") {
			this.$http
				.post("/h5live/speakSend", this.$qs.stringify(params))
				.then(
					res => {
						//console.log(res.data)
						if(res.data.code == "000000") {
							if(res.data.data == "ck") {
								fun.toastMessage("已提交，等待审核", 1500)
							} else {
								this.SendImMsg(tmpMsg); //im消息
							}
						} else if(res.data.code == "100003") {
							fun.toastMessage("您已被禁言", 1500)
						}else if(res.data.code == "100008") {
							fun.toastMessage("发言过于频繁，请稍后再发言！", 1500)
						}else{
							fun.toastMessage(res.data.msg, 1500)
						}
					},
					err => {
						console.log(err);
					}
				);
		}
		this.liveMessage = ''
	},
	send_z() {
		let _this = this;

		if(_this.send_z_flag) {//5秒之内请求接口一次
					_this.send_z_flag = false;
					setTimeout(function() {
						_this.send_z_flag = true;
					}, 30000);
					let params = {
						'type': '1',
						'liveType': this.liveType,
						'anchor': this.ownerid,
						'plat': fun.getPlatform(),
						'sceneId': this.sceneId,
                        'roomId': this.roomId
					};
					_this.$http.post("/h5live/speakSend", _this.$qs.stringify(params)).then(res => {
							_this.sendLoveMsg();
						},
						err => {
							console.log("speakSend err", err);
						}
					);
        }
        // 5秒 显示  +1
        setTimeout(() => {
          this.oneShow = true;
        }, 5000);
			},
			//多选题的点击
			checkLabel(id, questionId, code, type, index, qOptionNum) {
				// 手机号失去焦点
				if(this.phoneIsRequired) {
					this.$refs.mobileInput.blur()
				}
				let ids = this.checkedArrD[index].Listids.indexOf(id);
				this.checkedArrD[index].qaType = type;
				this.checkedArrD[index].questionId = questionId;
				if(ids >= 0) {
					this.checkedArrD[index].Listids.splice(ids, 1);
					removeByValue(this.checkedArrD[index].answerContent, code);
				} else {
					if(qOptionNum > 0) {
						//有限制最多
						if(this.checkedArrD[index].Listids.length < qOptionNum) {
							this.checkedArrD[index].Listids.push(id);
							this.checkedArrD[index].answerContent.push(code);
						}
					} else {
						//没有限制最多
						this.checkedArrD[index].Listids.push(id);
						this.checkedArrD[index].answerContent.push(code);
					}
				}
			},
			//打开的弹框-答题，投票等 里面的第一步提交
			answerFormPost(infoId, type) {
				this.errorShowD = false;

				let userAnswerList = []; //答案的集合
				let m = this.answerIngArr.length; //题目总长度
				let formKey = Object.keys(this.formDataD);

				if(!Object.values) {
					Object.values = function(obj) {
						if(obj !== Object(obj))
							throw new TypeError('Object.values called on a non-object');
						var val = [],
							key;
						for(key in obj) {
							if(Object.prototype.hasOwnProperty.call(obj, key)) {
								val.push(obj[key]);
							}
						}
						return val;
					}
				}

				let formValue = Object.values(this.formDataD);
				let formPost = []; //单选和填空的集合
					for(let j = 0; j < formKey.length; j++) {
					let tObj=this.answerIngArr.find (
							item => item.questionId === formKey[j]
						)
				    let qaType= tObj ? tObj.qType:''
					formPost = {
						answerContent: [formValue[j]],
						qaType,
						questionId: formKey[j]
					};
					userAnswerList.push(formPost);
				}

				for(let i = 0; i < m; i++) {
					if(this.checkedArrD[i].Listids.length > 0) {
						userAnswerList.push(this.checkedArrD[i]);
					}
				}
				let postData = {
					infoId,
					mobile: this.mobileD,
					userAnswerList
				};

				if(userAnswerList.length > 0) {
					this.stringUserAnswer = userAnswerList[0].answerContent.sort().toString()
				}
				this.submitDisable=true //防止重复提交
				this.$http
					.get("/pcapi/qa/checkOverTime", {
						params: {
							infoId,
							qaType: this.rightListClickType,
						}
					})
					.then(res => {
						if(res.data.code !== "000000") {
							this.errorShowD = true
							this.errorShowD = true
							this.answerErrorText = `${this.retD[type]}时间已到，提交失败！`;
							this.submitDisable = false
						} else {
							if(this.phoneIsRequired && !this.mobileD) {
								this.errorShowD = true;
								this.answerErrorText = "请填写手机号";
								this.submitDisable = false
								return false;
							}
							if(userAnswerList.length < m) {
								this.errorShowD = true;
								this.answerErrorText = "请完成题目后再提交";
								this.submitDisable = false
								return false;
							}

							//提交答案请求
							this.$http
								.post("/pcapi/qa/addQaUserAnswer", postData, {
									headers: {
										"Content-Type": "application/json"
									}
								})
								.then(res => {
									if(res.data.code == "000000") {
										this.getQaAnswer(infoId);
										if(this.rightListClickType == "4") {
											if(this.voteIsRequired) {
												//要显示投票结果
												this.answerWrapTitle = "投票结果";
												this.answerWrapState = "4";
											} else {
												//不要显示投票结果
												this.answerWrapShow = false;
                        						fun.toastMessage("提交成功",1500)
											}

											this.SendImMsg(this.$channel+'VOTE')// 5 投票
        									//this.sendSqlData(5)
											this.submitDisable = false
										} else if(this.rightListClickType == "3") {
											this.answerWrapShow = false;
                      						fun.toastMessage("提交成功",1500)
											this.SendImMsg(this.$channel+'QUESTION')// 4 问卷
        									//this.sendSqlData(4)
											this.submitDisable = false
										} else if(this.rightListClickType == "1") {
											this.answerWrapTitle = "答案";
											if(m < 2 && userAnswerList[0].qaType != "3") {
												this.answerWrapState = "2"; //一题的时候
											} else {
												this.answerWrapState = "1"; //多题的时候
											}

											this.SendImMsg(this.$channel+'ANSWER')//  3 答题
        									//this.sendSqlData(3)
											this.submitDisable = false
										}
									} else {
										this.answerWrapShow = false;
                    					fun.toastMessage("提交错误",1500)
										this.submitDisable = false
									}
								})
								.catch(response => {
									this.submitDisable = false
									console.log(response);
								});

						}
					}).catch(response => {
						this.submitDisable = false
					});

			},
			submitAnswer() {
				this.answerFormPost(this.submitInfoId, this.rightListClickType);
			},
			//关闭弹框-答题，投票等
			closeAnswer() {
				this.answerWrapShow = false;
				//在答题界面点叉叉 显示手机号页面  在其它界面点叉叉 关闭弹框
				// const noCloseArr = ["1", "2", "4"];
				// if (
				//   noCloseArr.indexOf(this.answerWrapState) > -1
				// ) {
				//   this.answerWrapShow = true;
				// } else {
				//   this.answerWrapShow = false;
				// }
			},
			//游客底部点赞发言
			clickYKcover() {
				if(this.$store.state.isYk) {
					if(this.$channel == config.ZGYH  || this.$channel == config.ZGYH_PX){
						this.$emit("imMessage", {
						"type": "YKTipPage"
					  });
					   return
					}else if(this.$channel=='zxyh'||this.$channel=='xsdzq'||this.$channel=='hazq'){//中信银行 新时代证券  华安证券 游客提示
						fun.ykDisposeFun()
							return
					}else if (this.$channel=='gszq' && window.terminal.isGszqApp){
            // fun.gszqGoLogin()//登录app
            fun.ykDisposeFun("请登录app")
          }else{
						fun.ykDisposeFun("此功能暂未开通")
							return
					}
				}
			},
			//打开弹框-答题，投票等
			openAnswer(id, type) {
				if(this.$store.state.isYk) {
					//this.YKLinkIs = true
					if(this.$channel == config.ZGYH || this.$channel == "gd" || this.$channel == config.ZGYH_PX){
							if(this.$source == '10') {
							fun.ykDisposeFun("请登录中国银行APP")
							return
						}
						this.$emit("imMessage", {
							"type": "YKTipPage"
						});
						return
					}else if(this.$channel == config.GDYH){
							fun.ykDisposeFun("此功能暂未开通")
						return
					}else if (this.$channel=='gszq' && window.terminal.isGszqApp){
            // fun.gszqGoLogin()//登录app
            fun.ykDisposeFun("请登录app")
          }else{
						fun.ykDisposeFun()
						return
					}

				}

				// if(type == "2") {
				// 	if(this.$store.state.userInfo.un == "Pnr3NFDGxlk") {
				// 		fun.ykDisposeFun("请登录后进行操作")
				// 		return
				// 	}
          		// 	let preImg = encodeURIComponent(fun.deleteT(this.liveMsgData.preImagUrl, 4, 1))
          		// 	let wxPic = encodeURIComponent(this.$store.state.userInfo.wxpic?this.$store.state.userInfo.wxpic:(location.origin+window.imgTx))
          		// 	this.$router.push(`/${this.$channel}/invitationCard?preImg=${preImg}&wxPic=${wxPic}`)
				// 	return
				// }
				this.rightListClickType = type;
				this.errorShowD = false;
				this.getQaInfoDetail(id, type);

				//在第一步点击的时候就需要统一请求 是否显示手机号
				this.getPhoneIsRequired(id);
				this.submitInfoId = id;
			},
			//获取题目
			getQaInfoDetail(id, type) {

				//处理app 未登录游客0127
				if(this.$store.state.userInfo.un == "Pnr3NFDGxlk") {
					fun.ykDisposeFun("请登录中国银行APP",1500)//1.5秒消失
					return
				}

				this.$http
					.get("/pcapi/qa/getQaInfoDetail", {
						params: {
							infoId: id,
							qaType: type,
							zbAct: this.$route.params.ownerid
						}
					})
					.then(res => {
						if(res.data.code == "000000") {
							this.answerIngArr = res.data.data;
							for(let key in this.answerIngArr) {
								this.$set(this.checkedArrD, key, {});
								this.$set(this.checkedArrD[key], "answerContent", []);
								this.$set(this.checkedArrD[key], "qaType", "");
								this.$set(this.checkedArrD[key], "questionId", "");
								this.$set(this.checkedArrD[key], "Listids", []);
							}
							this.answerWrapTitle = this.retD[type];
							this.answerWrapState = "0";
							this.answerWrapShow = true;
						} else {
              fun.toastMessage(res.data.msg,1500)
						}
					})
					.catch(response => {
						console.log(response);
					});
			},
			//获取答案
			getQaAnswer(id) {
				this.$http
					.get("/pcapi/qa/getQaAnswer", {
						params: {
							infoId: id
						}
					})
					.then(res => {
						if(res.data.code == "000000") {
							if(this.rightListClickType == "4") {
								//投票
								this.voteArr = res.data.data;
							} else if(this.rightListClickType == "1") {
								//答题
								this.answerResultArr = res.data.data;
								if(res.data.data.length == 1) {
									let hhhDD = res.data.data[0].rightAnswerList;
									let mmmDD = hhhDD.map(function(item) {
										return item.answerId;
									});
									if(this.stringUserAnswer === mmmDD.sort().toString()) {
										this.resultTypeD = true;
									} else {
										this.resultTypeD = false;
									}
								}
							}
						}
					})
					.catch(response => {
						console.log(response);
					});
			},
			//获取悬浮按钮
			getRightList() {
				this.$http
					.get("/pcapi/qa/getQaType", {
						params: {
						  roomId: this.roomId,
						  zbAct: this.$route.params.ownerid
						}
					})
					.then(res => {
						if(res.data.code == "000000") {
							this.rightList = res.data.data;
							// console.log([...res.data.data,...this.rightList])
						}
					})
					.catch(response => {
						console.log(response);
					});
			},
			//是否绑定手机号
			getPhoneIsRequired(id) {
				this.$http
					.get("/pcapi/qa/isShow", {
						params: {
							infoId: id
						}
					})
					.then(res => {
						if(res.data.code == "000000") {
							if(res.data.data.isMobile === "1") {
								this.phoneIsRequired = true;
							}
							if(res.data.data.isShowResult === "1") {
								this.voteIsRequired = true;
							}
						}
					})
					.catch(response => {
						console.log(response);
					});
			},
			// //关闭错误弹框
			// dialogSuspensionClose() {
			//   this.dialogSuspension = false;
			// },
			// //打开错误弹框
			// dialogSuspensionOpen(type, msg) {
			//   this.dialogSuspension = true;
			//   this.dialogSuspensionText = msg;
			// },
			//推送投票答题问卷等等
			pushVote(obj) {
				//开始清空操作
				this.answerWrapState = "0";
				this.formDataD = {};
				this.phoneIsRequired = false; //手机号是否显示
				this.voteIsRequired = false; //投票结果是否显示
				// this.dialogSuspension=false;
				this.answerWrapShow = true;
				this.openAnswer(obj.infoId, obj.type);
				this.getRightList();

				//psuh 邀请卡
				let _this = this
				let TabArrayRuan = _this.$store.state.liveNavTabArray
				let channelArr = [config.ZHANGHANG_01, config.ZGYH, config.ZGYH_PX];
				for(let i = 0; i < TabArrayRuan.length; i++) {
					if(TabArrayRuan[i].type == "4" && TabArrayRuan[i].invitaCard == "1" && channelArr.indexOf(this.$channel) < 0) {
						// let qaTypeArrary = {
						// 	"qaType": 2
						// }
						// setTimeout(function() {
						// 	_this.rightList.push(qaTypeArrary)
						// }, 2000)
						_this.inviteShow=true
					}
				}
			},
			//针对中行的邀请有礼
			handelInvited() {
				if(this.$store.state.isYk) {
					if(this.$source == '10') {
						fun.ykDisposeFun("请登录中国银行APP",1500)
						return
					}
					this.$emit("imMessage", {
						"type": "YKTipPage"
					});
					return
				}
				if(this.$store.state.userInfo.un == "Pnr3NFDGxlk") {
					fun.ykDisposeFun("请登录后进行操作",1500)
					return
				}
        		let preImg = encodeURIComponent(fun.deleteT(this.liveMsgData.preImagUrl, 4, 1))
        		let wxPic = encodeURIComponent(this.$store.state.userInfo.wxpic)
        		this.$router.push(`/${this.$channel}/invitationCard?preImg=${preImg}&wxPic=${wxPic}`)
			},
			//点击邀按钮
			openInvite(){
				if(this.$store.state.isYk) {
					//this.YKLinkIs = true
					if(this.$channel == config.ZGYH || this.$channel == "gd" || this.$channel == config.ZGYH_PX){
							if(this.$source == '10') {
							fun.ykDisposeFun("请登录中国银行APP")
							return
						}
						this.$emit("imMessage", {
							"type": "YKTipPage"
						});
						return
					}else if(this.$channel == config.GDYH){
							fun.ykDisposeFun("此功能暂未开通")
						return
					}else if (this.$channel=='gszq' && window.terminal.isGszqApp){
						// fun.gszqGoLogin()//登录app
						fun.ykDisposeFun("请登录app")
					}else{
						fun.ykDisposeFun()
						return
					}
					}


				if(this.$store.state.userInfo.un == "Pnr3NFDGxlk") {
					fun.ykDisposeFun("请登录后进行操作")
					return
				}
				// 中信信用卡 分享
				if(this.$channel==='zxxykzx' && fun.getPlatform() ==='app'){
					this.$emit("imMessage", {
							"type": "zxxykzxShare"
						});

					return
				}

          		let preImg = encodeURIComponent(fun.deleteT(this.liveMsgData.preImagUrl, 4, 1))
          		let wxPic = encodeURIComponent(this.$store.state.userInfo.wxpic?this.$store.state.userInfo.wxpic:(location.origin+window.imgTx))
          		this.$router.push(`/${this.$channel}/invitationCard?preImg=${preImg}&wxPic=${wxPic}`)
			},
      socketCallBack(){
        if(this.$route.query.fromUn != undefined) {
          let _this = this
          setTimeout(()=>{
            console.log("im call back sharecount")
            let params = {
              'fromUn': _this.$route.query.fromUn,
              'anchor': _this.ownerid,
              'roomId': _this.roomId
            };
            _this.$http.post("/h5live/shareCount", _this.$qs.stringify(params)).then(
              res => {
                if(res.data.code == "000000") {
                  console.log("share invite data", res.data.data)
                } else {
                  console.log("server data err")
                }
              },
              err => {
                console.log(err);
              }
            );
          },368)
        }
      }
		},
		filters: {
			addOne: function(value) {
				return value + 1;
			},
			filterFooterNum: function(type, fixed) {
				if(typeof type == "undefined") {
					return 0
				} else if(type < 10000) {
					return type
				} else {
					return(type / 10000).toFixed(fixed) + "w";
				}
			}
		}
	};
</script>

<style>
  .addone {
    position: absolute;
    bottom: -40px;
    right: -56px;
    transform: scale(0.3);
  }
  .one_no {
    display: none;
  }
  .add_up {
    animation: addOne 1.2s ease-in-out;
  }
  @keyframes addOne {
    0% {
      display: none;
      opacity: 0;
    }
    40% {
      display: none;
      opacity: 0;
    }
    100% {
      display: block;
      opacity: 1;
      transform: scale(0.6);
      bottom: 120px;
    }
  }
	.HDClass{
		width:610px;
		height:35px;
		line-height: 35px;
		background:rgba(252,247,243,1);
		border-radius:6px;
		color: #945700;
		font-size: 28px;
		padding: 2px 10px;
		float: left;
		margin: 10px 0 0 0px;
	}
.HDClass1{
		width:610px;
		height:35px;
		line-height: 35px;
		background:rgba(252,247,243,1);
		border-radius:6px;
		color: #945700;
		font-size: 28px;
		padding: 2px 10px;
		float: left;
		margin: 10px 0 0 0;
	}
	.HDimg{
		width: 24px;
		height: 30px;
		float: right;
	}
	.classDT{
		background: url(../assets/images/answerimg.png) no-repeat;
		background-size:24px  30px ;
	}
	.classWJ{
		background: url(../assets/images/question.png) no-repeat;
		background-size:24px  30px ;
	}
	.classTP{
		background: url(../assets/images/voteimg.png) no-repeat;
		background-size:24px  30px ;
	}
	.footer-zan-num {
		width: 80px;
		height: 100%;
		position: absolute;
		bottom: -5px;
		right: 10px;
		font-size: 28px;
		color: #CC3538;
		text-align: center;
	}

	.YK-cover {
		width: 100%;
		height: 100px;
		background: transparent;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 1000;
	}

	.shoppingBi p {
		font-size: 26px;
		color: white;
		line-height: 60px;
		float: right;
		margin-right: 8px;
		/*background: #007AFF;*/
		width: 120px;
		height: 60px;
		text-align: center;
	}

	.live-card {
		width: 100px;
		height: 100px;
		/*background: salmon;*/
		border-radius: 50%;
		position: absolute;
		top: 800px;
		right: 40px;
		display: none;
	}

	.live-card1 {
		width: 100px;
		height: 100px;
		background: pink;
		border-radius: 50%;
		position: absolute;
		top: 900px;
		right: 40px;
		/*display: none;*/
	}

	.shopping-list {
		width: 100%;
		position: fixed;
		bottom: -719px;
		left: 0;
		z-index: 200;
		background: white;
		border-radius: 30px 30px 0 0;
		/*box-shadow: 3px -5px 15px rgb(239, 226, 226);*/
	}

	.shopping-list1 {
		width: 100%;
		position: fixed;
		bottom: -330px;
		left: 0;
		z-index: 200;
		background: white;
		border-radius: 30px 30px 0 0;
		/*box-shadow: 3px -5px 15px rgb(239, 226, 226);*/
		animation: shoppingAnimate1 0.5s ease-out 1 forwards;
	}

	.shopping-list-close1 {
		width: 100%;
		position: fixed;
		bottom: -330px;
		left: 0;
		z-index: 200;
		background: white;
		border-radius: 30px 30px 0 0;
		/*box-shadow: 3px -5px 15px rgb(239, 226, 226);*/
		animation: shoppingAnimateClose1 0.5s ease-out 1 forwards;
	}

	@keyframes shoppingAnimateClose1 {
		from {
			transform: translateY(-330px);
		}
		to {
			transform: translateY(0);
		}
	}

	@keyframes shoppingAnimate1 {
		from {
			transform: translateY(0px);
		}
		to {
			transform: translateY(-330px);
		}
	}

	.shopping-list2 {
		width: 100%;
		position: fixed;
		bottom: -524px;
		left: 0;
		z-index: 200;
		background: white;
		border-radius: 30px 30px 0 0;
		/*box-shadow: 3px -5px 15px rgb(239, 226, 226);*/
		animation: shoppingAnimate2 0.6s ease-out 1 forwards;
	}

	.shopping-list-close2 {
		width: 100%;
		position: fixed;
		bottom: -524px;
		left: 0;
		z-index: 200;
		background: white;
		border-radius: 30px 30px 0 0;
		/*box-shadow: 3px -5px 15px rgb(239, 226, 226);*/
		animation: shoppingAnimateClose2 0.6s ease-out 1 forwards;
	}

	@keyframes shoppingAnimateClose2 {
		from {
			transform: translateY(-524px);
		}
		to {
			transform: translateY(0);
		}
	}

	@keyframes shoppingAnimate2 {
		from {
			transform: translateY(0px);
		}
		to {
			transform: translateY(-524px);
		}
	}

	.shopping-list3 {
		width: 100%;
		position: fixed;
		bottom: -716px;
		left: 0;
		z-index: 200;
		background: white;
		border-radius: 30px 30px 0 0;
		/*box-shadow: 3px -5px 15px rgb(239, 226, 226);*/
		animation: shoppingAnimate3 0.6s ease-out 1 forwards;
	}

	.shopping-list-close3 {
		width: 100%;
		position: fixed;
		bottom: -716px;
		left: 0;
		z-index: 200;
		background: white;
		border-radius: 30px 30px 0 0;
		/*box-shadow: 3px -5px 15px rgb(239, 226, 226);*/
		animation: shoppingAnimateClose3 0.6s ease-out 1 forwards;
	}

	@keyframes shoppingAnimateClose3 {
		from {
			transform: translateY(-716px);
		}
		to {
			transform: translateY(0);
		}
	}

	@keyframes shoppingAnimate3 {
		from {
			transform: translateY(0px);
		}
		to {
			transform: translateY(-716px);
		}
	}

	.shopping-list-header {
		width: 750px;
		height: 140px;
		border-radius: 30px 30px 0 0;
		background: url(../assets/images/shoppingBg.png) no-repeat;
		background-size: 750px 140px;
		/*position: absolute;
		top: 0;
		left: 0;
		z-index: 1001;*/
	}

	.shopping-list-header div {
		width: 53px;
		height: 46px;
		float: right;
		margin: 20px 20px 0 0;
	}

	.shopping-list-ul {
		width: 100%;
		overflow-y: scroll;
		max-height: 576px;
		/*position: absolute;
		top: 60px;
		left: 0;
		z-index: 1000;*/
		background: white;
	}

	.shopping-list-ul li {
		width: 100%;
		height: 192px;
		/*background: #CCCCCC;*/
	}

	.shopping-list-li-left {
		width: 250px;
		height: 100%;
		/* background: skyblue;*/
		float: left;
	}

	.shopping-list-li-left img {
		width: 150px;
		height: 150px;
		margin: 20px 0 0 50px;
		border-radius: 15px;
	}

	.shopping-list-li-right {
		width: 490px;
		height: 100%;
		/*background: seashell;*/
		float: left;
		position: relative;
	}

	.shopping-p {
		width: 100%;
		height: 80px;
		/*background: #87CEEB;*/
		font-size: 30px;
		color: #3b3b3b;
		font-weight: 600;
		margin-top: 30px;
		line-height: 40px;
	}

	.shopping-price {
		font-size: 24px;
		color: #e31d1a;
		margin-top: 25px;
	}

	.shopping-priceNum {
		font-size: 30px;
		font-weight: bold;
	}

	.shopping-tagA {
		width: 54px;
		height: 54px;
		display: inline-block;
		background: url(../assets/images/arrow_right.png) no-repeat;
		background-size: 54px 54px;
		position: absolute;
		bottom: 14px;
		right: 80px;
	}

	footer {
		width: 100%;
		height: 100px;
		background: white;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 10;
		border-top: 1px solid #e2e2e2;
    box-sizing: border-box;
	}
    .shield-box{
    	width: 620px;
    	height: 100px;
    	background:transparent;
    	position: absolute;
    	top: 0;
    	left: 0;
    	z-index: 10000;
    }
    /*.shield-box-gdkj{
    	width: 100vw;
    	height: 100px;
    	background:white;
    	position: absolute;
    	top: 0;
    	left: 0;
    	z-index: 10000;
    }*/
	.comment-box {
		width: 100%;
    height: 100px;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
	}

	.input-big-box {
		width: 590px;
		height: 78px;
		background: rgba(246, 246, 246, 1);
		border-radius: 23px;
	}

	.input-big-box1 {
		width: 600px;
		/* 530px*/
		height: 78px;
		background: rgba(246, 246, 246, 1);
		border-radius: 23px;
	}

	.comment-box input {
		height: 78px;
		width: 490px;
		line-height: 78px;
		font-size: 30px;
		float: left;
		background: rgba(246, 246, 246, 1);
		border-radius: 23px 0 0 23px;
		border-top: none;
		border-bottom: none;
		outline: none;
		border-right: 2px solid rgba(241, 241, 241, 1);
		padding-left: 25px;
		line-height: 35px;
	}

	.comment-box1 input {
		height: 78px;
		width: 500px;
		line-height: 78px;
		font-size: 30px;
		float: left;
		background: rgba(246, 246, 246, 1);
		border-radius: 23px 0 0 23px;
		border-top: none;
		border-bottom: none;
		outline: none;
		border-right: 2px solid rgba(241, 241, 241, 1);
		padding-left: 25px;
		line-height: 35px;
	}

	.send {
		width: 90px;
		height: 78px;
		border-radius: 0 23px 23px 0;
		color: #9c313c;
		display: inline-block;
		text-align: center;
		float: left;
		background: url(../assets/images/msgArrow.png) no-repeat center center;
		background-size: 47px 35px;
	}

	.send-red {
		width: 90px;
		height: 78px;
		border-radius: 0 23px 23px 0;
		color: #9c313c;
		display: inline-block;
		text-align: center;
		float: left;
		background: url(../assets/images/msgArrowRed.png) no-repeat center center;
		background-size: 47px 35px;
	}

	.comment-livep {
		display: inline-block;
		line-height: 40px;
	}

	.zan-num {
		font-size: 24px;
		color: #555555;
		text-align: center;
		float: right;
	}

	.comment {
		width: 100%;
		padding: 0 20px;
		height: calc(100vh - 664px);
		margin: 0 auto;
		overflow: scroll;
		-webkit-overflow-scrolling: touch;
		min-height:calc(100vh - 664px);
		/*background: darkcyan;*/
	}

	/*.msgContentClass {
		width: 100%;
		height: 100%;
		background: firebrick;
	}*/



	.comment-list {
		width: 88%;
		display: inline-block;
		padding: 10px 0px 10px 20px;
		font-size: 30px;
	}

	.comment-list p {
		margin: 4px 0 0 0;
	}

	/*.comment p:nth-child(1) {
		color: #222;
	}

	.comment p:nth-child(2) {
		color: #9d9d9d;
	}

	.comment p:nth-child(3) {
		color: #666;
	}*/

	#live-red a {
		color: #b8011f;
		text-decoration: underline !important;
		background: transparent !important;
	}

	.comment-livep {
		display: inline-block;
	}

	#comment-imgicon {
		width: 48px;
		height: 40px;
		display: block;
		float: right;
		background: url(../assets/images/icon.png);
		background-size: 120px 250px;
		background-position: -0px -150px;
		margin: 0 0 0 10px;
	}

	.send i {
		font-size: 42px;
	}

  .num-box .icon {
    font-size: 78px;
    color: #cc3538;
    z-index: 10;
  }

  .num-box .icon1 {
    font-size: 78px;
    color: #cc3538;
    z-index: 10;
  }

  .zan-num {
    font-size: 24px;
    color: #555555;
    text-align: center;
    float: right;
  }

  .num-box {
    border-radius: 100%;
    position: relative;
  }

	#live-red {
		color: black;
		text-align: justify;
		line-height: 36px;
		word-break: break-all;
	}

	.heart {
		position: fixed;
		right: 50px;
		bottom: 80px;
		display: block;
		z-index: 0;
		opacity: 0;
	}

	.heart1 {
		background: url(../assets/images/h1.png) no-repeat;
		animation: heart-fly 3s 0s linear infinite;
		width: 36px;
		height: 32px;
		background-size: 36px auto;
	}

	.heart2 {
		background: url(../assets/images/h2.png) no-repeat;
		animation: heart-fly 3s 0.8s linear infinite;
		width: 58px;
		height: 44px;
		background-size: 54px auto;
	}

	.heart3 {
		background: url(../assets/images/h3.png) no-repeat;
		animation: heart-fly 3s 1.6s linear infinite;
		width: 64px;
		height: 50px;
		background-size: 60px auto;
	}

	.heart4 {
		background: url(../assets/images/h4.png) no-repeat;
		animation: heart-fly 3s 2.4s linear infinite;
		width: 60px;
		height: 46px;
		background-size: 56px auto;
	}

	@keyframes heart-fly {
		0% {
			-webkit-transform: translate(0, 0);
			transform: translate(0, 0);
			opacity: 0.2;
		}
		25% {
			-webkit-transform: translate(-6px, -6px);
			transform: translate(-6px, -6px);
			opacity: 0.5;
		}
		50% {
			-webkit-transform: translate(18px, -38px);
			transform: translate(18px, -38px);
			opacity: 0.8;
		}
		75% {
			-webkit-transform: translate(-20px, -78px);
			transform: translate(-20px, -78px);
			opacity: 1;
		}
		100% {
			-webkit-transform: translate(8px, -170px);
			transform: translate(8px, -170px);
			opacity: 0;
		}
	}

	.click-zan {
		position: absolute;
		left: 30%;
	}

	.fade-enter-active,
	.fade-leave-active {
		transition: opacity 2.5s;
	}
	.fade-enter,
	.fade-leave-to {
		opacity: 0;
	}

	.marquee-box {
		position: fixed;
		top: 650px;
		/*	left: 50px;*/
		z-index: 1100;
		background: pink;
		display: flex;
		display: -webkit-flex;
		background: #9c313c;
		color: white;
		padding: 0 40px;
		align-items: center;
		justify-content: center;
		-webkit-align-items: center;
		-webkit-justify-content: center;
		border-radius: 20px;
		height: 70px;
	}

	.marquee-box p {
		height: 58px;
		line-height: 58px;
		white-space: nowrap !important;
	}

	.logo {
		width: 80px;
		height: 70px;
		background: url(../assets/images/yIcons.png);
		background-size: 400px 400px;
		background-position: 0px -50px;
	}

	.liveMsg {
		width: 100%;
		height: 750px;
		height: calc(100vh - 664px);
		background: white;
	/*	background: #DCDCDC;*/
	}
	/* 悬浮 */

	.liveMsg-suspension {
		position: fixed;
		bottom: 186px;
		right: 40px;
		display: flex;
		flex-direction: column-reverse;
		align-items: center;
/*		background: pink;*/
	}

	.liveMsg-suspension li {
		width: 84px;
		height: 84px;
		border-radius: 50%;
		font-size: 45px;
		line-height: 88px;
		text-align: center;
	}

	.liveMsg-suspension li+li {
		margin-bottom: 10px;
	}

	.liveMsg-suspension li.status0 {
		background: rgb(1, 181, 234);
		color: #fff;
	}

	.liveMsg-suspension li.status1 {
		background: rgb(255, 194, 7);
		color: #fff;
	}

	.liveMsg-suspension li.status2 {
		background: rgb(251, 108, 92);
		color: #fff;
	}

	.liveMsg-suspension li.status3 {
		background: rgb(204, 68, 71);
		color: #fff;
	}

	.liveMsg-suspension .statusY {
		background: rgb(226, 85, 62);
		color: #f4ea2a;
	}


	/* 答题 */

	.answer-wrap {
		width: 100%;
		height: calc(100vh - 500px);
		/* background: #FAFAFA; */
		background: #fff;
		border-radius: 10px 10px 0px 0px;
		position: fixed;
		top: 500px;
		z-index: 1100;
	}

	.a-w-i-head {
		font-size: 38px;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		color: rgba(204, 45, 48, 1);
		text-align: center;
		padding: 20px 0;
		/* box-shadow: 2px 4px 2px rgba(8, 9, 6, 0.1); */
		/* box-shadow: 0 2px 2px rgba(0,0,0,.15); */
	}

	.a-w-i-question {
		padding: 0 30px;
		height: calc(100vh - 540px);
		transform: rotate(0deg);
		overflow: hidden;
		overflow-y: auto;
	}

	.center-ans {
		font-size: 34px;
		margin-bottom: 50px;
	}

	.a-w-i-question .question-id {
		color: #cc2d30;
	}

	.question-item {
		padding-bottom: 4px;
	}

	.question-item>div {
		line-height: 1.2;
	}

	.a-w-i-question .question-item+.question-item {
		margin-top: 60px;
	}

	.question-item ul {
		padding-left: 45px;
		padding-top: 20px;
	}

	.question-item ul li label,
	.question-item ul li span {
		background: #ffffff;
		width: 600px;
		padding: 25px 38px 25px 80px;
		box-shadow: 0px 3px 9px 1px rgba(1, 1, 1, 0.1);
		border-radius: 30px;
		line-height: 1.4;
		color: #968e8e;
		font-size: 32px;
		display: inline-block;
		border: 2px solid #fff;
		word-break: break-all
	}

	input[type="radio"] {
		width: 0px;
		height: 0px;
		opacity: 0;
	}

	.question-item ul li {
		margin-top: 30px;
		font-size: 0;
		position: relative;
	}

	.question-item ul li i {
		position: absolute;
		top: 18px;
		left: 30px;
		font-size: 45px;
	}

	.normal-color {
		color: #CC2D30
	}

	.color {
		color: #D4D4D4
	}

	.question-item input:checked+label {
		border: 2px solid rgba(255, 0, 0);
		color: #CC2D30;
	}

	.question-item li span.isChecked {
		border: 2px solid rgba(255, 0, 0);
		color: #CC2D30;
	}

	.filling-wrap {
		width: 600px;
		height: 88px;
		background: #F1F1F1;
		border-radius: 10px;
		outline: none;
		margin-top: 30px;
		box-sizing: border-box;
		padding: 0 45px;
		margin-left: 45px;
		border: 1px solid #d9d9d9;
	}

	.a-w-i-button {
		width: 250px;
		height: 88px;
		background: rgba(204, 45, 48, 1);
		border-radius: 30px;
		text-align: center;
		line-height: 88px;
		color: #fff;
		position: absolute;
		bottom: 35px;
		left: 50%;
		transform: translateX(-50%);
	}

	.close-answer-wrap {
		position: absolute;
		top: 0px;
		right: 0px;
		color: #adadad;
		width: 100px;
		height: 100px;
		z-index: 101;
	}

	.close-answer-wrap i {
		margin-left: 30px;
		margin-top: 30px;
		display: inline-block;
		font-size: 30px;
	}

	.a-w-i-error {
		width: 600px;
		height: 48px;
		line-height: 48px;
		background: rgba(204, 160, 161, 0.24);
		border-radius: 15px;
		color: #cc2d30;
		position: absolute;
		bottom: 145px;
		left: 50%;
		transform: translateX(-50%);
		font-size: 32px;
	}

	.a-w-i-error i {
		font-size: 28px;
		padding: 0 10px 0 30px;
	}

	.result {
		padding: 0 34px;
		overflow: hidden;
		height: calc(100vh - 500px);
		transform: rotate(0deg);
	}

	.result-item {
		color: #0c0c0c;
		margin-top: 30px;
	}

	.result-item li+li {
		margin-top: 50px;
	}

	.result-item-text {
		margin-top: 30px;
		padding-left: 68px;
	}

	.result-item-text-left {
		color: #0c0c0c;
	}

	.result-item-text-right {
		color: #cc2d30;
		margin-left: 10px;
	}

	.prompt {
		margin-top: 92px;
		text-align: center;
	}

	.prompt .icon-duigou1,
	.prompt .icon-cuowu {
		font-size: 140px;
		display: inline-block;
		color: #CC2D30;
		margin-bottom: 40px;
	}

	.prompt i {
		font-size: 140px;
		width: 140px;
		display: block;
		color: #CC2D30;
		margin: 0 auto;
		margin-bottom: 40px;
	}

	.prompt p {
		color: #cc2d30;
		font-size: 32px;
		text-align: center;
	}

	.prompt-error {
		color: #0c0c0c;
		margin-bottom: 30px;
	}

	.oneAnswer {
		text-align: center;
	}

	.oneAnswer p {
		margin-top: 20px
	}

	.bindingWrap {
		/* padding: 0 45px; */
		margin-top: 30px;
	}

	.binding-head {
		color: #cc2d30;
		font-size: 33px;
		margin-bottom: 80px;
		text-align: center;
		font-weight: bold;
	}

	.binding-form {
		position: relative;
	}

	.senCode {
		margin-left: 120px;
	}

	.senCode .cube-btn {
		width: 200px;
		border-radius: 15px;
		font-size: 26px;
	}

	.binding-form button {
		width: 180px;
		height: 45px;
		font-size: 26px;
		line-height: 1px;
	}

	.binding-form input {
		width: 100%;
		height: 65px;
		line-height: 65px;
		border: 0;
		border-bottom: 1px solid rgb(210, 210, 210);
		background: #fafafa;
	}

	.binding-form input.binding-form-mobile {
		padding-left: 125px;
	}

	.binding-form input+input {
		margin-top: 40px;
		padding-right: 220px;
	}

	.binding-foot button {
		width: 620px;
		height: 88px;
		margin: 0 auto;
		border-radius: 30px;
		font-size: 32px;
		position: fixed;
		bottom: 40px;
		left: 50%;
		transform: translateX(-50%);
	}
	/* 投票进度条 */

	.voteItem {
		margin-top: 30px;
	}

	.voteItem-p-wrap>div {
		display: inline-block;
		vertical-align: middle;
	}

	.progress {
		width: 412px;
		overflow: hidden;
		height: 36px;
		margin-bottom: 20px;
		margin-top: 20px;
		background-color: #f7f7f7;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		border-radius: 10px;
		margin-right: 46px;
	}

	.progress .bar {
		width: 0%;
		height: 100%;
		color: #ffffff;
		float: left;
		font-size: 12px;
		text-align: center;
		align-items: center;
		display: flex;
		justify-content: center;
		text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
		background-color: #cc2d30;
	}

	.dialogSuspension-text {
		text-align: center;
		padding-top: 80px;
		color: #0c0c0c;
		font-size: 28px;
	}

	.internationalCode {
		color: #cc2d30;
		position: absolute;
		height: 65px;
		line-height: 65px;
		width: 100px;
	}

	.fillInPhoneBox ul {
		width: 90%;
		height: auto;
		margin: 0 auto;
		font-size: 32px;
		color: #0c0c0c;
	}

	.fillInPhoneBox ul li {
		width: 100%;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #c5c5c5;
		font-size: 30px;
	}

	.fillInPhone-arrow {
		width: 30px;
		height: 30px;
		border: 4px solid #dcdcdc;
		display: inline-block;
		transform: rotate(45deg);
		border-bottom: none;
		border-left: none;
		vertical-align: middle;
		margin-right: 10px;
	}

	.select-state {
		line-height: 70px;
	}

	.change-satate {}

	.input-phone {
		width: 440px;
		margin-left: 20px;
		outline: none;
		border: none;
		background: #fafafa;
	}

	.inputCode {
		width: 200px;
		margin-top: 6px;
		background: #fafafa;
		outline: none;
		border: none;
	}

	.select-state-yz {
		margin-top: 2px;
	}

	input::-webkit-input-placeholder {
		color: #b2b2b2;
		font-size: 30px;
		text-align: left;
	}

	.tip {
		width: 750px;
		text-align: center;
		color: #cc3538;
		margin-top: 50px;
	}

	.submit-btn {
		width: 650px;
		height: 80px;
		background: rgba(204, 53, 56, 1);
		border-radius: 15px;
		margin: 50px auto;
		color: white;
		text-align: center;
		line-height: 80px;
		font-size: 36px;
	}

	.msgContentClass li {
		/*margin-top: 10px;*/
		width: 100%;
		height: auto;
		/*background: #0086B3;*/
	}
	.sys-box {
		margin-top: 10px;
	}
	/*下面是红包*/

	.clickhongbao {
		width: 750px;
		line-height: 50px;
	}


	/*红包二维码*/
	.redPacket-box-er{
		width:100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.4);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1006;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}
	.redPacket-box-er .erImg{
		width: 500px;
		height: 550px;
		background: white;
		padding: 20px 20px 0 20px;
		margin-top: 180px;
	}
	.redPacket-box-er .erImg img{
		width: 460px;
		height: 460px;
	}
	.redPacket-box-er .erImg p{
		color: #0C0C0C;
		font-weight: 500;
		font-size: 26px;
		width: 460px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		margin-top: 10px;
	}
	.er-close{
		width: 60px;
		height: 60px;
		margin-top: 20px;
	}
	.startRedPacket {
		width: 450px;
		height: 603px;
		background: url(../assets/images/redPacket.png) no-repeat;
		background-size: 450px 603px;
		position: absolute;
		top: 405px;
		left: 150px;
		border-radius: 18px;
	}

	.sqzj-box {
		width: 101px;
		height: 18px;
		background: url(../assets/images/sqzj.png) no-repeat;
		background-size: 101px 18px;
		position: absolute;
		top: 52px;
		right: 10px;
	}

	.lingquBox {
		font-size: 20px;
		color: #ababab;
		margin: 5px 0 10px 20px;
	}

	.result-item-text>div {
		display: inline-block;
		vertical-align: top;
	}

	.result-item-text-right>div+div {
		margin-top: 10px;
	}

	.countryCode {
		justify-content: space-between;
	}

	.phoneBlock {
		display: flex;
		align-items: center;
		margin-bottom: 60px;
	}

	.phoneBlock>div {
		font-size: 34px;
	}

	.phoneBlock>input {
		width: 455px;
		height: 64px;
		box-sizing: border-box;
		padding-left: 22px;
		font-size: 32px;
		border-radius: 10px;
		background: #F6F6F6;
		border: 1px solid #F6F6F6;
	}

	.center-ans {
		margin-top: 30px;
	}

	.answer-button {
		width: 250px;
		height: 88px;
		background: rgba(204, 45, 48, 1);
		border-radius: 30px;
		text-align: center;
		line-height: 88px;
		color: #fff;
		margin: 0 auto;
		margin-bottom: 30px;
		font-size: 34px;
		border: 0;
		display: block;
	}

	.answer-error-wrap {
		height: 48px;
		width: 100%;
		margin-top: 30px;
		margin-bottom: 36px;
	}

	.answer-error {
		width: 600px;
		height: 48px;
		line-height: 48px;
		background: rgba(204, 160, 161, 0.24);
		border-radius: 15px;
		color: #cc2d30;
		font-size: 32px;
		margin: 0 auto;
	}

	.answer-error i {
		font-size: 28px;
		padding: 0 10px 0 30px;
	}

	/*.shopping-btn {
		width: 180px;
		height: 60px;
		background: url(../assets/images/shopping-btn.png) no-repeat;
		background-size: 180px 60px;
		position: absolute;
		top: 610px;
		right: -100px;
	}

	.animateShopping {
		width: 180px;
		height: 60px;
		background: url(../assets/images/shopping-btn.png) no-repeat;
		background-size: 180px 60px;
		position: fixed;
		top: 610px;
		right: 0;
		animation: shoppingAnimate 3s linear 1 forwards;
	}

	.shoppingAnimateFadeIn {
		width: 180px;
		height: 60px;
		background: url(../assets/images/shopping-btn.png) no-repeat;
		background-size: 180px 60px;
		position: fixed;
		top: 600px;
		right: 0;
		animation: shoppingAnimateFadeIn 1.5s ease-out 1 forwards;
	}

	@keyframes shoppingAnimate {
		0% {
			transform: translateX(0px);
		}
		50% {
			transform: translateX(100px);
		}
		100% {
			transform: translateX(100px);
		}
	}

	@keyframes shoppingAnimateFadeIn {
		0% {
			transform: translateX(100px);
		}
		50% {
			transform: translateX(0px);
		}
		100% {
			transform: translateX(0px);
		}
	}*/



	.shoppingBi:after {
		content: '';
		position: absolute;
		width: 30px;
		height: 100%;
		top: 0;
		left: -30px;
		-webkit-transform: skew(-15deg);
		-ms-transform: skew(-15deg);
		transform: skew(-15deg);
		background: rgba(255, 255, 255, .3);
		-webkit-animation: shine 1.5s linear infinite;
		animation: shine 1.5s linear infinite;
	}

	@-webkit-keyframes shine {
		0% {
			-webkit-transform: skew(-15deg) translate(-100%, 0);
		}
		40% {
			-webkit-transform: skew(-15deg) translate(230px, 0);
		}
		100% {
			-webkit-transform: skew(-15deg) translate(230px, 0);
		}
	}

	@keyframes shine {
		0% {
			transform: skew(-15deg) translate(-100%, 0);
		}
		40% {
			transform: skew(-15deg) translate(230px, 0);
		}
		100% {
			transform: skew(-15deg) translate(230px, 0);
		}
	}

	.sysInfo-ul {
		/*margin-top: 20px;*/
	}
	/* 一件下单的动画效果 */

	@keyframes rainbow {
		0% {
			background: #1abc9c;
		}
		10% {
			background: #2ecc71;
		}
		20% {
			background: #3498db;
		}
		30% {
			background: #9b59b6;
		}
		40% {
			background: #e74c3c;
		}
		50% {
			background: #e67e22;
		}
		60% {
			background: #f1c40f;
		}
		70% {
			background: #2c3e50;
		}
		80% {
			background: #9b59b6;
		}
	}

	@keyframes heartbeat {
		50% {
			transform: scale(1.1);
		}
	}

	.button-rainbow {
		width: 188px;
		height: 60px;
		font-size: 32px;
		position: fixed;
		top: 585px;
		right: 10px;
		z-index: 1004;
		background: #c0392b;
		color: #fff;
		border: 1px solid #fff;
		border-radius: 30px;
		outline: none;
		transition: 0.2s ease-in-out;
		letter-spacing: 2px;
		animation: rainbow 3s infinite, heartbeat 0.6s infinite;
		line-height: 60px;
		padding-left: 25px;
	}

	.button-rainbow i {
		position: absolute;
		left: 2px;
		font-size: 36px;
		color: #fff;
	}
	/* 中行邀请有礼 */

	.invited {
		position: relative;
	}
    .invited-top{
		margin-bottom: 20px;
	}
	.invited .box {
		width: 216px;
		height: 66px;
		/* background:linear-gradient(-30deg,rgba(255,160,113,1),rgba(255,135,138,1)); */
		background: linear-gradient(-30deg, #FF878A, #FFA071);
		box-shadow: 0px 3px 3px 0px rgba(27, 28, 31, 0.15);
		border-radius: 30px;
		font-size: 38px;
		color: #fff;
		text-align: center;
		line-height: 66px;
		/* display: flex;
align-items: center; */
		font-family: -apple-system-font, sans-serif;
	}

	@keyframes heartbeat {
		0% {
			transform: scale(1, 1);
		}
		25% {
			transform: scale(1.2, 1.2);
		}
		100% {
			transform: scale(1, 1);
		}
	}

	.invited .pic {
		width: 46px;
		position: absolute;
		left: -22px;
		top: 10px;
		animation: heartbeat 1s infinite;
		-webkit-animation: heartbeat 0.8s infinite;
	}

	.liveMsg-suspension.hasInvited {
		bottom: 275px;
	}
	/*.gsyh-tip-box{
		width: 100vw;
		height:calc(100vh - 578px);
		background: white;
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 10000;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28px;
		color: #a5a5a5;
	}*/
	.hd-message-box{
		position: fixed;
		bottom: 110px;
		right: 20px;
	}
	.marquee-tip-blue{
		position: fixed;
		left: -400px;
		bottom: 135px;
		z-index: 1000;
		background:rgba(54,209,255,1);
		opacity:0.85;
		border-radius:8px;
		color: white;
		font-size: 24px;
		padding: 10px 16px;
		text-align: center;
		font-weight: 500;
	}
	.marquee-tip-orange{
		position: fixed;
		left: -400px;
		bottom: 135px;
		z-index: 1000;
		background:#ff9e63;
		opacity:0.85;
		border-radius:8px;
		color: white;
		font-size: 24px;
		padding: 10px 16px;
		text-align: center;
		font-weight: 500;
	}
	.marquee-tip-orange1{
		position: fixed;
		left: -400px;
		bottom: 135px;
		z-index: 1000;
		background:#ff7162;
		opacity:0.85;
		border-radius:8px;
		color: white;
		font-size: 24px;
		padding: 10px 16px;
		text-align: center;
		font-weight: 500;
	}
	.marquee-tip span{
		margin-right: 10px;
  }

  .noMsgTables.liveMsg {
    height: calc(100vh - 594px);
  }
  .noMsgTables .comment {
    height: calc(100vh - 594px);
    min-height: calc(100vh - 594px);
  }

	.red-gif{
		width: 137px !important;
		height: 106px !important;
	}
	.red-gif img{
		width: 137px !important;
		height: 106px !important;
	}



	/*直播间改造留言区域css*/
	.msg-li-li{
		display: flex;
	}
	.msg-li-li .li-msg-left{
		width: 70px;
		/*background: pink;*/
	}
	.msg-li-li .li-msg-right{
		flex: 1;
		display: flex;
		flex-direction: column;
		/*background: salmon;*/
	}
	.msg-li-li .li-msg-left img {
		width: 70px;
		height: 70px;
		margin: 10px 0 0 0 ;
		background-position: 70px 70px;
		border-radius: 100%;
		border: 2px solid #ebebeb;
	}
	.nickBox {
		color: #9da2a5;
		font-size: 28px;
		margin: 10px 0 0 20px;
		/*background: pink;*/
		display: flex;
		align-items: center;
		flex: 1;
	}
	.reply-nick-box .reply-name{
	 font-size: 24px;
	 color: #8A8B8C;;
	}


	.nikeNameRuan {

	}

	.liveTimeRuan {
		font-size: 22px;
		color: #cbcccb;
		margin-left: 20px;
	}
	.connect-boxText {
		flex: 1;
		margin: 10px 0 0 20px;
		font-size: 28px;
		color: #0c0c0c;
		text-align: justify;
		line-height: 30px;
		word-wrap: break-word
	}
	.hongbaohtml {
		width: 370px;
		height: 108px;
		background: salmon;
		background: url(../assets/images/hongbaobg.png) no-repeat;
		background-size: 370px 108px;
		display: flex;
	}

	.hongbaohtml1 {
		width: 370px;
		height: 108px;
		background: salmon;
		background: url(../assets/images/hongbaobg1.png) no-repeat;
		background-size: 370px 108px;
		display: flex;
	}
	.pTitleClass {
		font-size: 26px;
		color: #f5efe3 !important;
		margin: 20px 0 0 98px;
	}

	.pTitleClass1 {
		font-size: 26px;
		color: #ffffff !important;
		margin: 20px 0 0 90px;
	}
	.sysInfo-ul li{
		display: flex;
	}
	.sysInfo-ul li img{
		width: 70px;
		height: 70px;
		margin-top: 10px;
	}


	.reply-msg-box{
		background: #F7F7F7;
		margin-left: 20px;
		margin-top: 17px;
		padding: 20px 10px 20px 31px;
	}

	.reply-nick-box{
	    display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-bottom: 12px;
		color: #9da2a5;
		font-size: 24px;
	}
	.reply-time{
		color:#CBCBCB;
		font-size: 20px;
		margin-left: 20px;
	}
	.reply-text{
		color: #8A8B8C;
		margin-top: 10px;
		font-size: 24px;
		line-height: 30px;
		word-wrap: break-word;
		word-break: break-all;
	}
	.name-art{
		color:#CB3537 ;
		font-size: 28px;
		margin-right: 7px;
	}
	.official-span{
		display: inline-block;
		width: 70px;
		background: linear-gradient(141deg, rgba(177, 98, 216, 0.9),rgba(165, 9, 243, 0.9));
		border-radius: 6px;
		line-height: normal;
		padding:3px 0;
		text-align: center;
        color: white;
        font-size: 22px;
        margin-right: 9px;
	}
	.message-hidden{
		display: none;
	}
</style>
